Horizontal Hover To Scroll In jQuery - hoverscroll

File Size: 4.11 KB
Views Total: 2215
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Horizontal Hover To Scroll In jQuery - hoverscroll

hoverscroll is a tiny jQuery plugin that allows you to scroll through a horizontal list by hovering a given trigger element.

Ideal for creating an interactive control to loop through any types of long content list like navbar, news sticker, image carousel, post list, and much more.

How to use it:

1. Create a horizontal list (like a navbar) on the 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">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

2. Create trigger elements that can be used 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 elements that can be used to scroll the menu items left or right.

let listElement = $('.scrollmenu');
let leftHoverScrollElement = $('#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 and automatically show/hide the trigger elements depending on the scroll position.

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

5. Config the scrolling effect.

  • pps: pixels per second
  • easing: easing function
// scroll.start(pps, easing);
scroll.start(2000, "easingFunction");

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