Optiscroll is a tiny (4kB gzipped, 9kB minified) and highly optimized custom scrollbar library for modern web apps. It aims to be as light as possible in order to not affect the performance of the page.

Why another Javascript scrollbar library?

The reason I have created Optiscroll is to solve a common problem in web design: the customization of browser scrollbars. As a designer you would like to have full control over the presentation of every single element on the page.

Currently, only Webkit allows scrollbars customization natively but with strong limitations. For instance, you cannot create “over the content” scrollbars, like iOS/Android ones.

What about X,Y,Z library?

The main reason I have developed my own solution is that I want such plugin do more. Not just hiding scrollbars, but extending browser scroll functionalities. Moreover, I don‘t want to replace the browser scrolling logic (as iScroll does) nor I want to make it rely on external libraries (as nanoScroller and many other do).
I want a polyfill for an enhanced scrolling experience.

From my point of view, browsers should add more functionalities related to the scroll. For instance, why are we missing an animated scrollTo? And what about scrollstart and scrollstop events?
Optiscroll adds them in a nice way.

Key functionalities

Vertical, horizontal and nested scrollbars support
Sounds like a requirement, but most of the libraries out there work only with vertical scrollbars or they do not support nested scroll areas.

Custom events
This library fires some helpful events in order to let you do staff when the user scrolls (pull to refresh anyone?). The events fired are: sizechange, scrollstart, scroll, scrollstop, scrollreachedge and more.

Animated scrollTo and scrollIntoView
With a fixed duration or with an optimal duration based on the distance to be scrolled. Moreover, scrollIntoView accepts a delta parameter, which is the distance from the edge.

Auto update on content/scroll area change
While developing rich internet applications, I was tired to pollute my views with ScrollbarPlugin.update() each time I toggle an accordion or each time a new child view is added. So, Optiscroll by default auto update itself. If the scroll area size or its content changes, Optiscroll updates the scrollbars accordingly. Moreover, when you remove the Optiscroll element from the DOM, the plugin will unbind the events and release the instance automatically.

Integrated page bounce fix for iOS
Another useful feature for web apps is the page bounce fix for iOS devices. So, the web page will behave more like a native app.

See it in action or read the full documentation.