This time I will share jQuery Plugin and tutorial about Configurable Custom Scrollbar Plugin For jQuery – jsScroll, hope it will help you in programming stack.
| File Size: | 11.3 KB |
|---|---|
| Views Total: | 2002 |
| 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.
1 |
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> |
2 |
<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’.
1 |
$('#el').jsScroll({ |
2 |
height: '200px' |
3 |
}) |
3. Add a custom horizontal scrollbar to the top of the DIV container.
1 |
$('#el').jsScroll({ |
2 |
height: 'auto', |
3 |
width: '800px', |
4 |
position: 'top' |
5 |
}); |
4. Position the custom scrollbar on the left side of the DIV container.
1 |
$('#eg4').jsScroll({ |
2 |
position: 'left', |
3 |
height: '200px' |
4 |
}); |
5. All default settings to config the custom scrollbar.
01 |
$('#eg4').jsScroll({ |
02 |
03 |
// false = appear on hover over |
04 |
alwaysVisible: false, |
05 |
06 |
// height |
07 |
height: 'auto', |
08 |
09 |
// width |
10 |
width: 'auto', |
11 |
12 |
// CSS class |
13 |
wrapperClass: 'js-scroll-wrapper', |
14 |
15 |
// 'right', 'left', 'top', 'bottom' |
16 |
position: 'right', |
17 |
18 |
// distance from the edge of the container |
19 |
distance: '0px', |
20 |
21 |
// height of horizontal scrollbar |
22 |
railHeight: '15px', |
23 |
24 |
// width of track |
25 |
railWidth: '15px', |
26 |
27 |
// color of scrollbar |
28 |
railColor: 'rgba(206, 206, 206, 0.8)', |
29 |
30 |
// CSS class of scrollbar |
31 |
railClass: 'js-scroll-rail', |
32 |
33 |
// whether to display scrollbar track |
34 |
railVisible: true, |
35 |
36 |
// border radius |
37 |
railBorderRadius: '7px', |
38 |
39 |
// color of thumb |
40 |
barColor: 'rgba(33, 150, 243, 1)', |
41 |
42 |
// min height of thumb |
43 |
minBarHeight: '10px', |
44 |
45 |
// CSS class of thumb |
46 |
barClass: 'js-scroll-bar', |
47 |
48 |
// border radius of thumb |
49 |
barBorderRadius: '7px', |
50 |
51 |
// distance on each scroll when mouse scroll |
52 |
wheelStep: 20, |
53 |
54 |
// distance on each scroll when touch swipe |
55 |
touchScrollStep: 200, |
56 |
57 |
// enable page scroll |
58 |
allowPageScroll: false, |
59 |
60 |
// 'vertical' or 'horizontal' |
61 |
scrollPosiion: 'vertical' |
62 |
63 |
}); |
This awesome jQuery plugin is developed by chenjsh36. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
