Creating a custom scroll is a difficult task. It has to work in all modern browsers and operating systems including mobile.
One of the challenges is achieving the behavior of OS animations when scrolling, especially in OSX.
The motivation to use a custom scroll, is the fact that regular scroll affects layout, as in the leftmost example below.
To solve this I found a way to keep using the native OS scroll mechanism, while hiding the scrollbar itself and, in its place, displaying a new custom designed scrollbar.
This solution only requires syncing the two scrollbars, and maintains all native behaviors including animations for free.
The project is open-source
The scrollbar is layered above the layout, not altering it when it appears or disappears
Mouse wheel scroll animation works natively
No limitations on design, you can use whatever css or image you want