• If you want smooth scrolling, use smooth-scrollbar;
• If you want customizable scrollbars, use smooth-scrollbar;
• If you want high-performance scrollbars, use smooth-scrollbar;
• If you want incredibly prompt user support, use smooth-scrollbar;
• If you want perfect scrollbar in modern browsers, use smooth-scrollbar!

So, why would you still use other scrollbar plugins? All you need is a quick setup:

Via npm:

npm install smooth-scrollbar --save

Via bower:

bower install smooth-scrollbar --save

http://idiotwu.github.io/smooth-scrollbar/

As is explained in this article, browser repaint every frame in scrolling. Less painting is better.

To avoid repainting, I use translate3d in scroll content to create composite layers and force hardware accelerating.

Smooth scrollbar is defined as an UMD module which named Scrollbar, you can use any loader to load it:

import Scrollbar from 'smooth-scrollbar';

Or get it from window object:

const { Scrollbar } = window;

Don't forget to include the stylesheet in your page:

<link rel="stylesheet" href="dist/smooth-scrollbar.css">

Here're three ways to tell the plugin which element should be a smooth scrollbar:

1. As an element:

   <scrollbar>
       ...
   </scrollbar>

2. As an attribute:

   <section scrollbar>
       ...
   </section>

3. As a data attribute

   <section data-scrollbar>
       ...
   </section>

Then init all scrollbars:

Scrollbar.initAll(options);

Or you can call Scrollbar.init(elem, options) to manually init the scrollbar.

Confusing with the option field? Try edit tool here!

Following is the DOM structure that Scrollbar generated:

<scrollbar>
    <article class="scroll-content">
        your contents here...
    </article>
    <aside class="scrollbar-track scrollbar-track-x">
        <div class="scrollbar-thumb scrollbar-thumb-x"></div>
    </aside>
    <aside class="scrollbar-track scrollbar-track-y">
        <div class="scrollbar-thumb scrollbar-thumb-y"></div>
    </aside>
</scrollbar>

• Scrollbar API Documents
• Instance API Documents

• Scrollbar.init( element, [options] )
• Scrollbar.initAll( [options] )
• Scrollbar.has( element )
• Scrollbar.get( element )
• Scrollbar.getAll()
• Scrollbar.destroy( element )
• Scrollbar.destroyAll()

• instance#targets
• instance#offset
• instance#limit
• instance#scrollTop
• instance#scrollLeft

• instance#update( [async] )
• instance#getSize()
• instance#setPosition( x, y, [withoutCallbacks] )
• instance#scrollTo( x, y, [duration], [callback] )
• instance#scrollIntoView( elem, [options] )
• instance#isVisible( elem )
• instance#addListener( fn )
• instance#removeListener( fn )
• instance#unregisterEvents( regex [, regex [,...regex] ] )
• instance#registerEvents( regex [, regex [,...regex] ] )
• instance#infiniteScroll( callback, [threshold] )
• instance#clearMovement()
• instance#stop()
• instance#destroy()
• instance#getContentElem()
• instance#showTrack( [direction] )
• instance#hideTrack( [direction] )

• angular-smooth-scrollbar
• react-smooth-scrollbar

• Overscroll effect.

• Create an issue with an example on jsbin.com, including latest version of smooth-scrollbar through:

  <link rel="stylesheet" href="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.css">
  
  <script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>

• Fork the repo and modify the code if you have better ideas, create a pull request into develop branch after you've done.

MIT.