by buzinas

Very simple and lightweight vanilla javascript library for creating a custom scrollbar cross-browser...

474 Stars 144 Forks Last release: over 2 years ago (v0.4.0) MIT License 94 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


Very simple vanilla javascript library for creating a custom scrollbar cross-browser and cross-devices.


React version

I also open sourced a newer and more modern React version at:


  • Extremely lightweight (less than 1KB after gzip and minify)
  • It uses the native scroll events, so:
    • All the events work and are smooth (mouse wheel, space, page down, page up, arrows etc).
    • The performance is awesome!
  • No dependencies, completely vanilla Javascript!
  • RTL support (thanks to @BabkinAleksandr)

Browser Support

It was developed with evergreen browsers in mind, but it works on IE11.


You can use this library as a script tag, or you can import it as a npm module, eg:

Script tag

Download the script here and the styles from here and include it:

Or include it via jsDelivr CDN:


const SimpleScrollbar = require('simple-scrollbar');

ES2015 modules

import SimpleScrollbar from 'simple-scrollbar'
import 'simple-scrollbar/simple-scrollbar.css'


Include the attribute

in any
that you want to make scrollable, and the library will turn it for you

Manual binding

If you want to manually turn your div in a SimpleScrollbar, you can use the


Dynamically added content

If you use some client Framework, like Angular, Aurelia, etc - or any library that includes DOMElements dynamically in your app, and you want to use the SimpleScrollbar

attribute, you can use the
method, and it will turn all the elements with that attribute in a scrollable one for you.
var div = document.createElement('div');
div.insertAdjacentHTML('afterbegin', 'One');
div.setAttribute('ss-container', true);

var otherDiv = div.cloneNode(true); otherDiv.querySelector('span').textContent = 'Two';

document.body.appendChild(div); document.body.appendChild(otherDiv);


RTL Support


direction: rtl;
to your
's CSS, and SimpleScrollbar will detect the direction automatically.


Inspired by yairEO's jQuery plugin (fakescroll)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.