This time I will share jQuery Plugin and tutorial about Slim Cross-platform Custom Scrollbar Plugin – Nice-Scrollbar, hope it will help you in programming stack.
| File Size: | 20.2 KB |
|---|---|
| Views Total: | 2084 |
| 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.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/underscore-min.js"></script> |
3 |
<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.
1 |
<script src="tr.scroll.js"></script> |
2 |
<link rel="stylesheet" href="tr.scroll.css"> |
3. Create a scrollable container.
1 |
<div id="divParent"> |
2 |
<div id="divInside"> |
3 |
</div> |
4 |
</div> |
01 |
#divParent { |
02 |
03 |
/* You need to set a size */ |
04 |
height:152px; |
05 |
width:580px; |
06 |
07 |
/* Enable the scrollbar to do not go over the text when growing */ |
08 |
padding-right:10px; |
09 |
background:#777; |
10 |
color:#DDD; |
11 |
border-width: 1px; |
12 |
border-style: solid; |
13 |
border-color: rgb(255, 255, 255); |
14 |
margin:20px; |
15 |
|
16 |
} |
17 |
18 |
#divInside { |
19 |
padding:5px; |
20 |
} |
4. Append a custom scrollbar to the container.
01 |
var gNiceScroll; |
02 |
|
03 |
// Function to add Nice Scrollbar |
04 |
function AddNiceScrollbar() |
05 |
{ |
06 |
if( gNiceScroll ) |
07 |
gNiceScroll.Remove(); |
08 |
gNiceScroll = new TR.NiceScroll("#divInside"); |
09 |
gNiceScroll.Add(); |
10 |
} |
11 |
|
12 |
AddNiceScrollbar(); |
5. Customization options.
01 |
new TR.NiceScroll("#divInside",{ |
02 |
03 |
// Minimum size for the inner scroller |
04 |
"ScrollInnerSizeMin": 20 |
05 |
06 |
// Value to set to force scrolling |
07 |
"ForceScrollingMax": 5 |
08 |
09 |
// Enable to force scrolling |
10 |
"EnableForceScrolling": true, |
11 |
12 |
// Sensibility Touch in px to consider a click |
13 |
"SensibilityTouch": true, |
14 |
|
15 |
}); |
Changelog:
2018-03-12
- Version 1.3.8
