hover to scroll - Free Download Horizontal Hover To Scroll In jQuery - hoverscroll

Free Download Horizontal Hover To Scroll In jQuery – hoverscroll

Posted on

This time I will share jQuery Plugin and tutorial about Horizontal Hover To Scroll In jQuery – hoverscroll, hope it will help you in programming stack.

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

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.

01 <div class="scrollmenu">
02   <a href="#home">Home</a>
03   <a href="#news">News</a>
04   <a href="#contact">Contact</a>
05   <a href="#about">About</a>
06   <a href="#support">Support</a>
07   <a href="#blog">Blog</a>
08   <a href="#tools">Tools</a>
09   <a href="#base">Base</a>
10   <a href="#custom">Custom</a>
11   <a href="#more">More</a>
12   <a href="#logo">Logo</a>
13   <a href="#friends">Friends</a>
14   <a href="#partners">Partners</a>
15   <a href="#people">People</a>
16   <a href="#work">Work</a>
17 </div>

2. Create trigger elements that can be used to scroll the menu items left or right.

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

3. Create trigger elements that can be used to scroll the menu items left or right.

01 let listElement = $('.scrollmenu');
02 let leftHover<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>Element = $('#left-hover-scroll');
03 let rightHoverScrollElement = $('#right-hover-scroll');
04  
05 // initialize the plugin
06 let leftHoverScroll = new HoverScroller(leftHoverScrollElement, "left", listElement);
07 let rightHoverScroll = new HoverScroller(rightHoverScrollElement, "right", listElement);
08  
09 // start/stop the scrolling effect
10 leftHoverScrollElement.hover(function() {
11   leftHoverScroll.scroll.start();
12 }, function() {
13   leftHoverScroll.scroll.stop();
14 });
15 rightHoverScrollElement.hover(function() {
16   rightHoverScroll.scroll.start();
17 }, function() {
18   rightHoverScroll.scroll.stop();
19 });

4. Check the scroll event and automatically show/hide the trigger elements depending on the scroll position.

1 listElement.scroll(function() {
2   leftHoverScroll.check();
3   rightHoverScroll.check();
4 });

5. Config the scrolling effect.

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