jQuery Plugin For Scrolling List Items On Hover - asHoverScroll

asHoverScroll is a touch-friendly jQuery scroller plugin which allows a long list of items to be moved horizontally or vertically within a specified container based on the mouse movement.

How to use it:

1. Create a list of items for the scroller.

<div class="container vertical">
  <ul class="inner">
    <li>
      <div class="content">text 1</div>
      <div class="subInner">text 1 - 1</div>
    </li>
    <li>
      <div class="content">text 2</div>
      <div class="subInner">text 2 - 1</div>
    </li>
    <li>
      <div class="content">text 3</div>
      <div class="subInner">text 3 - 1</div>
    </li>
    ...
  </ul>
</div>

2. Load the jQuery asHoverScroll plugin after you have jQuery library loaded.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/jquery-asHoverScroll.js"></script>

3. Initialize the scroller.

$('.container').asHoverScroll({
  exception: '.subInner' // exceptions that display next to list items
});

4. Default plugin options.

namespace: 'asHoverScroll',

list: '> ul',
item: '> li',
exception: null,

direction: 'vertical',
fixed: false,

mouseMove: true,
touchScroll: true,
pointerScroll: true,

useCssTransforms: true,
useCssTransforms3d: true,
boundary: 10,

throttle: 20,

onEnter: function onEnter() {
  $(this).siblings().removeClass('is-active');
  $(this).addClass('is-active');
},
onLeave: function onLeave() {
  $(this).removeClass('is-active');
}

Change log:

v0.3.7 (2017-11-23)

• update

v0.3.6 (2017-10-31)

• update

v0.3.2 (2016-10-17)

• ES5 -> ES6

v0.2.3 (2015-12-17)

• fix mousemove issue after touch event

v0.2.2 (2015-12-16)

• fix exception issue

v0.2.1 (2015-12-11)

• add leave all method

---

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.