Slim Custom Scrollbar In Vanilla JavaScript – TrueScrollBar

Category: Javascript | December 4, 2020
Views Total:298 views
Official Page:Go to website
Last Update:December 4, 2020


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



  • v1.0.10

You Might Be Interested In:

One thought on “Slim Custom Scrollbar In Vanilla JavaScript – TrueScrollBar

Leave a Reply