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.
fakescroll.css
React port
import FakeScroll from '@yaireo/fakescroll/react.fakescroll.js'
import '@yaireo/fakescroll/fakescroll.css'
const onFakeScrollChange = ({ scrollRatio }) => console.log(scrollRatio)
<FakeScroll className='foo' track='smooth' onChange={onFakeScrollChange}>
...
</FakeScroll>
Example markup:
<div class="foo">
...
...
...
</div>
Initialize custom scrollbar with callback:
var myScrollbar = document.querySelector('.foo').fakeScroll({
onChange: () => console.log( myScrollbar.scrollRatio )
})
The onChange also has a scrollRatio propery in its argument:
document.querySelector('.foo--outside').fakeScroll({
onChange: ({ scrollRatio }) => console.log( scrollRatio )
});
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
| 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" |
| onChange | Function | Callback function whenever the scroll updates |
3 Apr 5, 2022
2 Mar 29, 2022
35 Nov 29, 2022
0 Nov 9, 2022
12 Aug 8, 2022
0 Jan 12, 2022
4 Feb 28, 2022
90 Dec 23, 2022
113 Dec 30, 2022
2.1k Jan 2, 2023
3 Feb 3, 2022
314 Jan 6, 2023
15 Dec 27, 2022
2 Jul 19, 2022
14 Sep 29, 2022
2 Sep 9, 2022