jQuery Plugin For Horizontal & Vertical Scroll On Hover - jQuery HoverScroll

jQuery HoverScroll for the Horizontal & Vertical Scroll On Hover functionality that enables you to scroll up/down a scrollable container with mouse hover instead of mouse wheel.

How to use it:

1. Import jQuery library and the jQuery HoverScroll plugin's JavaScript & CSS files into the html.

<link rel="stylesheet" href="css/hoverscroll.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/hoverscroll.js"></script>

2. Create a vertical scrollbar which allows to auto scroll on mouse hover & move.

<div class="scrollY classY">
  <div class="itemY"></div>
  <div class="itemY"></div>
  <div class="itemY"></div>
  <div class="itemY"></div>
  <div class="itemY"></div>
  <div class="itemY"></div>
</div>

.classY {
  width: 400px;
  height: 100px;
}

.itemY {
  width: 80%;
  margin: auto;
  margin-top: 16px;
  background: red;
  height: 50px;
}

3. Create a horizontal scrollbar which allows to auto scroll on mouse hover & move.

<div class="scrollX classX">
  <div class="itemX"></div>
  <div class="itemX"></div>
  <div class="itemX"></div>
  <div class="itemX"></div>
  <div class="itemX"></div>
  <div class="itemX"></div>
</div>

.classX {
  width: 200px;
  height: 100px;
  white-space: nowrap;
  float: left;
}

.itemX {
  width: 100px;
  margin: auto;
  background: red;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

---

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