User-friendly Scrollbar For Scrollable Content - horizontal.scroll.js

horizontal.scroll.js is a jQuery plugin that attaches an interactive, user-friendly, horizontal scrollbar to your scrollable content.

Ideal for horizontal content scroller where the users are able to scroll through the content with mouse wheel or by dragging the thumb or by clicking the arrow elements.

How to use it:

1. To get started, insert jQuery library and the horizontal.scroll.js plugin's files into the page.

<link rel="stylesheet" href="jquery.horizontal.scroll.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.horizontal.scroll.js"></script>

2. Create a content scroller from a regular HTML list as these:

<ul id="horiz_container_outer">
  <li id="horiz_container_inner">
    <ul id="horiz_container">
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
      ...
    </ul>
  </li>
</ul>

3. Create the horizontal scrollbar next to the scroller.

<div id="scrollbar">
  <a id="left_scroll" class="mouseover_left" href="#"></a>
  <div id="track">
    <div id="dragBar"></div>
  </div>
  <a id="right_scroll" class="mouseover_right" href="#"></a>
</div>

4. Initialize the scroller & scrollbar and done.

$(document).ready(function(){
  $('#horiz_container_outer').horizontalScroll();
});

5. Override the default styles of the scrollbar to your taste.

#scrollbar {
  position: relative;
  width: 815px;
  height: 12px;
  display: block;
  font-size: 1px;
  top: 0px;
  margin: 0px auto;
}

#track {
  position: absolute;
  left: 0px;
  top: 0;
  width: 815px;
  height: 12px;
  background: #676767;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#dragBar {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 20px;
  height: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.39, rgb(229,229,229)),  color-stop(0.7, rgb(245,245,245)) );
  background-image: -moz-linear-gradient(  center bottom,  rgb(229,229,229) 39%,  rgb(245,245,245) 70% );
}

#left_scroll {
  position: absolute;
  border-color: transparent gray transparent transparent;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0px;
  cursor: pointer;
  top: 1px;
  left: -15px;
}

#right_scroll {
  position: absolute;
  right: -15px;
  top: 1px;
  border-color: transparent transparent transparent gray;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0px;
  cursor: pointer;
}

---

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