Configurable Custom Scrollbar Plugin For jQuery - jsScroll

jsScroll is a simple, fully configurable jQuery custom scrollbar plugin which transforms any DIV element into a scrollable area with pretty horizontal and/or vertical scrollbars.

How to use it:

1. Load the jQuery jsScroll plugin's JavaScript file after loading jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.jsscroll.min.js"></script>

2. Add a custom vertical scrollbar to a specific DIV container the restrict the max height to '200px'.

$('#el').jsScroll({
  height: '200px'
})

3. Add a custom horizontal scrollbar to the top of the DIV container.

$('#el').jsScroll({
  height: 'auto',
  width: '800px',
  position: 'top'
});

4. Position the custom scrollbar on the left side of the DIV container.

$('#eg4').jsScroll({
  position: 'left',
  height: '200px'
});

5. All default settings to config the custom scrollbar.

$('#eg4').jsScroll({

  // false = appear on hover over
  alwaysVisible: false,

  // height
  height: 'auto',

  // width
  width: 'auto',

  // CSS class
  wrapperClass: 'js-scroll-wrapper',

  // 'right', 'left', 'top', 'bottom'
  position: 'right',

  // distance from the edge of the container
  distance: '0px',

  // height of horizontal scrollbar
  railHeight: '15px',

  // width of track
  railWidth: '15px',

  // color of scrollbar
  railColor: 'rgba(206, 206, 206, 0.8)',

  // CSS class of scrollbar
  railClass: 'js-scroll-rail',

  // whether to display scrollbar track
  railVisible: true,

  // border radius
  railBorderRadius: '7px',

  // color of thumb
  barColor: 'rgba(33, 150, 243, 1)',

  // min height of thumb
  minBarHeight: '10px',

  // CSS class of thumb
  barClass: 'js-scroll-bar',

  // border radius of thumb
  barBorderRadius: '7px',

  // distance on each scroll when mouse scroll
  wheelStep: 20,

  // distance on each scroll when touch swipe
  touchScrollStep: 200,

  // enable page scroll
  allowPageScroll: false,

  // 'vertical' or 'horizontal'
  scrollPosiion: 'vertical'

});

---

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