jQuery Plugin For Horizontal Scroll On Hover | hoverscroll

How to make use of it:

1. Create a horizontal checklist (like a navbar) on the web page.

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Web</a>
  <a href="#base">Code Flow</a>
</div>

2. Create trigger components that can be utilized to scroll the menu items left or right.

<div id="left-hover-scroll">Left</div>
<div id="right-hover-scroll">Right</div>

3. Create trigger components that can be utilized to scroll the menu items left or right.

let listElement = $('.scrollmenu');
let leftHover<a href="#!">Scroll</a>Element = $('#left-hover-scroll');
let rightHoverScrollElement = $('#right-hover-scroll');

// initialize the plugin
let leftHoverScroll = new HoverScroller(leftHoverScrollElement, "left", listElement);
let rightHoverScroll = new HoverScroller(rightHoverScrollElement, "right", listElement);

// start/stop the scrolling effect
leftHoverScrollElement.hover(function() {
  leftHoverScroll.scroll.start();
}, function() {
  leftHoverScroll.scroll.stop();
});
rightHoverScrollElement.hover(function() {
  rightHoverScroll.scroll.start();
}, function() {
  rightHoverScroll.scroll.stop();
});

4. Check the scroll event to show/hide the trigger components depending on the scroll position.

listElement.scroll(function() {
  leftHoverScroll.check();
  rightHoverScroll.check();
});

5. Config the scrolling impact.

// scroll.start(pps, easing);
scroll.start(2000, "easingFunction");

See Demo And Download