Auto Scrolling Data List With Pause On Hover - autoScroll
File Size: | 3.12 KB |
---|---|
Views Total: | 11575 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

autoScroll is a jQuery plugin to create a marquee effect that makes an HTML list automatically scroll along the vertical direction (from bottom to top) and auto disables the auto-scroll on mouse hover.
Ideal for long data lists such as recommended posts, featured products, latest news, and much more.
How to use it:
1. Load the JavaScript file jquery.autoscroll.js
after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/jquery.autoscroll.js"></script>
2. Add the 'data-autoscroll' attribute to your HTML list.
<ul class="data-list" data-autoscroll> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> <li>4444444444</li> <li>5555555555</li> <li>6666666666</li> <li>7777777777</li> <li>8888888888</li> <li>9999999999</li> </ul>
3. Hide the native browser scrollbar.
.hide-scrollbar::-webkit-scrollbar { display: none; } .data-list { height: 50px; width: 200px; overflow-y: hidden; }
4. Customize the scroll speed. Default: 50.
$("[data-autoscroll]").autoscroll({ interval: 100 });
5. Determine whether to hide the scrollbar. Default: true.
$("[data-autoscroll]").autoscroll({ hideScrollbar: false });
6. Event handlers which will be fired on mouse enter/leave.
$("[data-autoscroll]").autoscroll({ handlerIn: null, handlerOut: null });
This awesome jQuery plugin is developed by Vidvan. For more Advanced Usages, please check the demo page or visit the official website.