Auto Scrolling Data List With Pause On Hover - autoScroll

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.