#Slim-scroll (JavaScript Scroll Library) ~ 5KB compressed
Slim scroll is a replacement of default scrollbar provided by browsers on Windows. This library lets you design the scroll-bar by using simple css properties. It is created using javascript and css.
Main Features:
- Added Typings
- Easier to color the custom scrollbar using CSS.
- Can animate easily (check below properties for support).
- Re-evaluates when the container is fluid, vertically.
#####Method 1 (with no added styles):
new slimScroll(Element); // 'Element' is Javascript DOM object
#####Method 2 (with added styles):
or to add your own defined css styles:
new slimScroll(Element, {
'wrapperClass': '',
'scrollBarClass': '',
'scrollBarContainerClass': '',
'scrollBarContainerSpecialClass': '',
'scrollBarMinHeight': '',
'scrollBarFixedHeight': '',
'keepFocus': true/false
});
###Explanation of above properties:
- wrapperClass (type - "string") : Mention wrapper class here.
- scrollBarClass (type - "string") : Mention scroll bar class here.
- scrollBarContainerClass (type - "string") : Mention scroll bar container class here.
- scrollBarContainerSpecialClass (type - "string") : This property is used to mention a class which will be applied only when the user is scrolling the content. Could be helpful while applying animations to the scroll bar.
- scrollBarMinHeight (type - "Integer") : Used to mention minimum scroll bar height here (without pixel unit)
- scrollBarFixedHeight (type - "Integer") : Used to mention scroll bar fixed height (without pixel unit). This makes sure to show the scroll bar height fixed even when content inside the container is increased.
- keepFocus (type - "Boolean") : Used to focus the container.
###To make this work on height resize:
var customScroll = new slimScroll();
window.onresize = customScroll.resetValues; // pure javascript example.
###Note: