FakeScroll⚡lightweight custom-looking scrollbars

• 1.4KB gzipped (js)
• 4.0KB minified (js)
• 7.7KB unminified (js)
• ~20+ KB avarage similar scripts (unminified)

Currently only supports vertical scroll due to cultural norms

While there is somewhat of a support for scrollbar customization through CSS, it is not fully supported in all browsers / older versions and the level of customization isn't flexible enough to allow creativity or certain special product needs.

👉 Make sure to import fakescroll.css

React port

import FakeScroll from "@yaireo/fakescroll/react.fakescroll.js"
import "@yaireo/fakescroll/fakescroll.css"

<FakeScroll className="foo" track="smooth">
    ...
</FakeScroll>

Example markup:

<div class="foo">
    ...
    ...
    ...
</div>

Initialize custom scrollbar:

document.querySelector('.foo').fakeScroll();

The above markup will now become:

<div class="foo fakeScroll fakeScroll--hasBar">
    <div class="fakeScroll__wrap">
        <div class="fakeScroll__content">
            ...
            ...
            ...
        </div>
    </div>
    <div class="fakeScroll__bar"></div>
</div>

Browser support

The script probably won't work on IE without Babel & ES2015 polyfills.

DEMO PAGE

Settings