Author: | lugin-design |
---|---|
Views Total: | 289 views |
Official Page: | Go to website |
Last Update: | December 4, 2020 |
License: | MIT |
Preview:

Description:
TrueScrollBar is a tiny JavaScript library to append a slim custom scrollbar to a scrollable container.
How to use it:
1. Install the package with NPM.
# NPM $ npm install @lugindev/truescrollbar --save
2. Import the TrueScrollBar as an ES module.
import TrueScrollBar from '@lugindev/truescrollbar' import '@lugindev/truescrollbar/TrueScrollBar.min.css'
3. Or load the JavaScript and Stylesheet from a CDN.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lugindev/truescrollbar/src/TrueScrollBar.min.css" /> <script src="https://cdn.jsdelivr.net/npm/@lugindev/truescrollbar/src/TrueScrollBar.min.js"></script>
4. Initialize the TrueScrollBar on your scrollable container. Done.
<div class="scroll"> Scrollable Content Here </div>
.scroll { max-height: 400px; overflow: hidden; }
let el = document.querySelector('.scroll'); new TrueScrollBar(el);
5. Determine whether to enable the custom scrollbar on the mobile device.
new TrueScrollBar(document.body, { desktopOnly: false })
6. Determine whether the custom scrollbar takes up space in the markup. Default: false.
new TrueScrollBar(document.body, { takeMarkup: true })
7. Enable the RTL (Right To Left) mode. Default: false.
new TrueScrollBar(document.body, { rtl: true })
Changelog:
12/04/2020
- v1.0.10
Scroll does not clickable on non-jack area.