10 Best Custom Scrollbar JavaScript Libraries (2021 Update)

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 that can be used to replace and enhance the native scrollbars.

Originally Published Jan 27 2017, updated Mar 28, 2021

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. 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.

3. OverlayScrollbars

Demo Download

OverlayScrollbars is a JavaScript library used to create elegant, customizable and themeable scrollbars on any scrollable elements.

4. slim-scroll

Demo Download

Slim-scroll is a Pure JavaScript plugin to replace the native browser scrollbar with one that can be easily customized via CSS.

5. SimpleScrollbar

Demo Download

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

6. 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.

7. 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.