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
import FakeScroll from "@yaireo/fakescroll/react.fakescroll.js"
import "@yaireo/fakescroll/fakescroll.css"
<FakeScroll className="foo" track="smooth">
...
</FakeScroll>
<div class="foo">
...
...
...
</div>
document.querySelector('.foo').fakeScroll();
<div class="foo fakeScroll fakeScroll--hasBar">
<div class="fakeScroll__wrap">
<div class="fakeScroll__content">
...
...
...
</div>
</div>
<div class="fakeScroll__bar"></div>
</div>
The script probably won't work on IE without Babel & ES2015 polyfills.
Name | Type | Default | Info |
---|---|---|---|
classname | String | "" | Class name which is added to the scrollbar Track element |
track | Boolean/String | false | enable track events. use "smooth" for smooth "jumping" |