Slim Custom Scrollbar In Vanilla JavaScript – TrueScrollBar

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