Slim Cross-platform Custom Scrollbar Plugin - Nice-Scrollbar
File Size: | 20.2 KB |
---|---|
Views Total: | 2907 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Nice-Scrollbar is a simple-to-use jQuery plugin that appends a cross-browser, highly customizable scrollbar to a given scrollable container.
Basic usage:
1. Load jQuery library and other required resources in the html page.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/underscore-min.js"></script> <script src="/path/to/jquery.mousewheel.min.js"></script>
2. Download and load the jQuery nice-scrollbar plugin's JavaScript and CSS files in the html page.
<script src="tr.scroll.js"></script> <link rel="stylesheet" href="tr.scroll.css">
3. Create a scrollable container.
<div id="divParent"> <div id="divInside"> </div> </div>
#divParent { /* You need to set a size */ height:152px; width:580px; /* Enable the scrollbar to do not go over the text when growing */ padding-right:10px; background:#777; color:#DDD; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); margin:20px; } #divInside { padding:5px; }
4. Append a custom scrollbar to the container.
var gNiceScroll; // Function to add Nice Scrollbar function AddNiceScrollbar() { if( gNiceScroll ) gNiceScroll.Remove(); gNiceScroll = new TR.NiceScroll("#divInside"); gNiceScroll.Add(); } AddNiceScrollbar();
5. Customization options.
new TR.NiceScroll("#divInside",{ // Minimum size for the inner scroller "ScrollInnerSizeMin": 20 // Value to set to force scrolling "ForceScrollingMax": 5 // Enable to force scrolling "EnableForceScrolling": true, // Sensibility Touch in px to consider a click "SensibilityTouch": true, });
Changelog:
2018-03-12
- Version 1.3.8
This awesome jQuery plugin is developed by Ti-R. For more Advanced Usages, please check the demo page or visit the official website.