10 Best Custom Scrollbar JavaScript Libraries For 2019

Sometimes you might find you’ve got tired of ugly browser scrollbars when browsing web pages in daily work. Here’s a list of 10 JavaScript and/or pure CSS libraries which can be used to replace and enhance the native scrollbars.

Originally Published Jan 27 2017, updated Jan 10, 2019

Note: You can also apply your own styles to the native browser scrollbars with the following CSS snippets.

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* button */
::-webkit-scrollbar-button {
    background: #222; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #333; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #666; 
}

/* Track */
::-webkit-scrollbar-track {
    background: #000; 
}

/* The track NOT covered by the handle.
::-webkit-scrollbar-track-piece {
    background: #000; 
}

/* Corner */
::-webkit-scrollbar-corner {
    background: #999; 
}

/* Resizer */
::-webkit-resizer {
    background: #111; 
}

Let’s get started…

1. smooth-scrollbar

Demo Download

smooth-scrollbar is a JavaScript library used to create a customizable, performant scrollbar with smooth scrolling effects for scrollable content.

2. SimpleScrollbar

Demo Download

A simple, lightweight, ES6 compatible vanilla JavaScript library to create a custom scrollbar on your scrollable content on mouse hover.

3. wScroll

Demo Download

wScroll is a simple lightweight JavaScript library that adds a custom scrollbar to scrollable container like divs.

4. scrollbot

Demo Download

scrollbot is a standalone JavaScript library that adds a highly customizable scrollbar to the desired scrollable container.

5. Optiscroll

Demo Download

Optiscroll is a lightweight, highly customizable JavaScript library used to create custom horizontal and/or vertical scrollbars while preserving the native scroll behaviors.

6. SimpleBar

Demo Download

SimpleBar is a simple, standalone JavaScript library that appends a custom scrollbar to any scrollable container which has overflowing content. Works with CSS overflow: auto property and keeps the native scroll behavior.

7. MiniBar

Demo Download

MiniBar is a pure JavaScript library that allows you to create custom scrollbars using your own CSS classes. Based on the MutationObserver API.

8. Smooth Scrollbar

Demo Download

The Smooth Scrollbar JavaScript library enables you to implement cross-browser, high performance, highly customizable scrollbars with smooth kinetic/momentum scrolling effects.