simple-scrollbar

    0.4.0 • Public • Published

    SimpleScrollbar

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

    Demo

    http://buzinas.github.io/simple-scrollbar

    Benefits

    • 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 for evergreen browsers, but it works both on IE10 and IE11 either.

    If you want to make it works down to IE9, the only thing you need to do is to add the classList polyfill.

    <!--[if IE 9]><script src="classList.min.js"></script><![endif]-->

    Usage

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

    CommonJS

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

    ES2015 modules

    import SimpleScrollbar from 'simple-scrollbar'

    Auto-binding

    Include the attribute ss-container in any <div> that you want to make scrollable, and the library will turn it for you

    <div ss-container>One</div>
    <div ss-container>
      <span>Two</span>
    </div>

    Manual binding

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

    <div class="myClass"></div>
     
    <script>
      var el = document.querySelector('.myClass');
      SimpleScrollbar.initEl(el);
    </script>

    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 ss-container attribute, you can use the SimpleScrollbar.initAll 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', '<span>One</span>');
    div.setAttribute('ss-container', true);
     
    var otherDiv = div.cloneNode(true);
    otherDiv.querySelector('span').textContent = 'Two';
     
    document.body.appendChild(div);
    document.body.appendChild(otherDiv);
     
    SimpleScrollbar.initAll();

    RTL Support

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

    Credits

    Inspired by yairEO's jQuery plugin (fakescroll)

    Install

    npm i simple-scrollbar

    DownloadsWeekly Downloads

    1,482

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    11 kB

    Total Files

    6

    Last publish

    Collaborators

    • buzinas