Slim Custom Scrollbar In Vanilla JavaScript - TrueScrollBar

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 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="" />
<script src=""></script>

4. Initialize the TrueScrollBar on your scrollable container. Done.

<div class="scroll">
  Scrollable Content Here
.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

The post Slim Custom Scrollbar In Vanilla JavaScript – TrueScrollBar appeared first on CSS Script.