Auto Scrolling Data List With Pause On Hover - autoScroll

File Size: 3.12 KB
Views Total: 12878
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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.

  interval: 100

5. Determine whether to hide the scrollbar. Default: true.

  hideScrollbar: false

6. Event handlers which will be fired on mouse enter/leave.

  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.