Author: | yairEO |
---|---|
Views Total: | 645 views |
Official Page: | Go to website |
Last Update: | April 11, 2021 |
License: | MIT |
Preview:

Description:
This is the vanilla JavaScript version of the jQuery fakescroll plugin which makes the regular browser scrollbar fully customizable via CSS.
How to use it:
Download and import the fakescroll library into the document.
<link rel="stylesheet" href="fakescroll.css"> <script src="fakescroll.js"></script>
Initialize the fakescroll on your scrollable element. Done.
<div class="example"> Long Content Here </div>
document.querySelector('.example').fakeScroll();
Apply your own CSS styles to the scrollbar.
.example { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; min-height: 70%; height: 1px; width: 500px; overflow: auto; background: white; } .example.fakeScroll__scope { background: none; } .example .fakeScroll__content { padding-top: 1em; padding-bottom: 1em; } .example .fakeScroll__wrap { background: #FFF; border-radius: 4px; -moz-box-sizing: border-box; box-sizing: border-box; }
Enable/disable the scrollbar track.
document.querySelector('.example').fakeScroll({ track: true });
Add an extra CSS class to the scrollbar.
document.querySelector('.example').fakeScroll({ classname: 'your-own-class' });
Changelog:
v2.5.0 (04/11/2021)
- refactored
v2.2.1 (01/23/2021)
- [REFACTOR] – improved the way the scrollbar is hidden so it will be more accurate, regardless of it’s width