Slimscroll using JavaScript

Slim scroll is a replacement of default scrollbar provided by browsers. This plugin lets you design the scroll-bar by using simple css properties. It is created using vanilla javascript and css.

Download  |  Github

Tested on: IE8+, Chrome and Firefox.

Demo

How to use:

  • To make it work, include slimscroll.js (plugin) in head tag.
  • Add slimScroll class to the elements which need this slim scroll component.
  • Apply height to the container in fixed units or percentage.
  • Just design the scrollbar as you want by applying css classes as explained below.

and then:

Method 1 (with no added styles):
scroll.useSlimScroll(Element);   // 'Element' is Javascript DOM object
Method 2 (with added styles):

or to add your own defined css styles:

scroll.useSlimScroll(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:

window.onresize = scroll.setValues;  // pure javascript example.

Note:

  • Usage of the above mentioned properties is optional or as per need.
  • Add higher specificity css to override the custom styles which are being applied by the plugin.
  • Don’t override the styles which are given highest specificity (!important) by the plugin (those styles are necessary to make this scroll plugin work).

How I got this thought:

I got this thought, when I found solution to hide the default scrollbar (using css) which was the requirement for a post on Stackoverflow.

The solution was simple but that is how I got this thought :).


If you find any issue(s), please file here.