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

User-friendly Scrollbar For Scrollable Content - horizontal.scroll.js
File Size: 12.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.