This time I will share jQuery Plugin and tutorial about Highly Customizable Custom Overlay Scrollbar Plugin With jQuery, hope it will help you in programming stack.
| File Size: | 755 KB |
|---|---|
| Views Total: | 14062 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
The jQuery OverlayScrollbars plugin provides a simple way to create customizable, themeable overlay scrollbars on any scrollable element while preserving the native scroll functionality.
The DOC of vanilla JS version is available here.
Features:
- Touch-enabled.
- RTL supported.
- CSS3 animated.
- Cross browser.
- High performance.
Basic usage:
1. Include the main stylesheet and a theme CSS of your choice on the head section of the webpage.
01 |
<!-- Main --> |
02 |
<link href="css/OverlayScrollbars.css" rel="stylesheet"> |
03 |
04 |
<!-- round dark --> |
05 |
<link href="css/os-theme-round-dark.css" rel="stylesheet"> |
06 |
07 |
<!-- round light --> |
08 |
<link href="css/os-theme-round-light.css" rel="stylesheet"> |
09 |
10 |
<!-- block dark --> |
11 |
<link href="css/os-theme-block-dark.css" rel="stylesheet"> |
12 |
13 |
<!-- block light --> |
14 |
<link href="css/os-theme-block-light.css" rel="stylesheet"> |
15 |
16 |
<!-- minimal dark --> |
17 |
<link href="css/os-theme-minimal-dark.css" rel="stylesheet"> |
18 |
19 |
<!-- minimal light --> |
20 |
<link href="css/os-theme-minimal-light.css" rel="stylesheet"> |
21 |
22 |
<!-- thick dark --> |
23 |
<link href="css/os-theme-thick-dark.css" rel="stylesheet"> |
24 |
25 |
<!-- thick light --> |
26 |
<link href="css/os-theme-thick-light.css" rel="stylesheet"> |
27 |
28 |
<!-- thin dark --> |
29 |
<link href="css/os-theme-thin-dark.css" rel="stylesheet"> |
30 |
31 |
<!-- thin light --> |
32 |
<link href="css/os-theme-thin-light.css" rel="stylesheet"> |
2. Include both jQuery JavaScript library and the jquery.overlayScrollbars.js script on the page.
1 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> |
2 |
<script src="js/jquery.overlayScrollbars.js"></script> |
3. Call the function on the target scrollable element and specify the theme Class you want to use. Available themes:
- os-theme-dark: built-in
- os-theme-light: built-in
- os-theme-minimal-dark
- os-theme-minimal-light
- os-theme-thin-dark
- os-theme-thin-light
- os-theme-thick-dark
- os-theme-thick-light
- os-theme-round-dark
- os-theme-round-light
- os-theme-block-dark
- os-theme-block-light
1 |
$('body').overlayScrollbars({ |
2 |
className: "os-theme-dark" |
3 |
}); |
4. More configuration options to customize the scrollbars.
01 |
$('body').overlayScrollbars({ |
02 |
03 |
// none || both || horizontal || vertical || n || b || h || v |
04 |
resize : 'none', |
05 |
06 |
// true || false |
07 |
sizeAutoCapable : true, |
08 |
09 |
// true || false |
10 |
clipAlways : true, |
11 |
12 |
// true || false |
13 |
normalizeRTL : true, |
14 |
15 |
// true || false |
16 |
paddingAbsolute : false, |
17 |
18 |
// true || false || null |
19 |
autoUp<a href="https://www.jqueryscript.net/time-clock/">date</a> : null, |
20 |
21 |
// number |
22 |
autoUpdateInterval : 33, |
23 |
24 |
// Control on which elements / selectors OverlayScrollbars shall update automatically after the emit of a load event. |
25 |
// You can set it to null to disable this auto updating entierly or add your own selectors to update only on special img elements or on for example loaded iframes. |
26 |
updateOnLoad: ['img'], |
27 |
28 |
// These options are only respected if the native scrollbars are overlaid. |
29 |
nativeScrollbarsOverlaid : { |
30 |
showNativeScrollbars : false, //true || false |
31 |
initialize : true //true || false |
32 |
}, |
33 |
34 |
// Defines how the overflow should be handled for each axis |
35 |
overflowBehavior : { |
36 |
37 |
// visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s |
38 |
x : 'scroll', |
39 |
40 |
// visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s |
41 |
y : 'scroll' |
42 |
}, |
43 |
44 |
// Defines the behavior of the custom scrollbars. |
45 |
scrollbars : { |
46 |
visibility : 'auto', //visible || hidden || auto || v || h || a |
47 |
autoHide : 'never', //never || scroll || leave || n || s || l |
48 |
autoHideDelay : 800, //number |
49 |
dragScrolling : true, //true || false |
50 |
clickScrolling : false, //true || false |
51 |
touchSupport : true, //true || false |
52 |
snapHandle: true //true || false |
53 |
}, |
54 |
55 |
// Defines special behavior of textarea elements. |
56 |
textarea : { |
57 |
dynWidth : false, //true || false |
58 |
dynHeight : false, //true || false |
59 |
inheritedAttrs : inheritedAttrsTemplate //string || array || null |
60 |
} |
61 |
|
62 |
}); |
5. Callback functions.
