Configurable Custom Scrollbar Plugin For jQuery - jsScroll
File Size: | 11.3 KB |
---|---|
Views Total: | 2266 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.