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

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

Performant Custom Scrollbar JavaScript Library – 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

Elegant Themeable Custom Scrollbars – OverlayScrollbars

Demo Download

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


4. slim-scroll

Minimal Custom Scrollbar In Vanilla JavaScript fakescroll

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

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

Stylish Custom Scrollbar In Pure JavaScript – 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

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.


8. scrollBot

scrollBot

Demo Download

A vanilla JavaScript library that appends a highly customizable scrollbar to your scrollable container.


9. fakescroll

Minimal Custom Scrollbar In Vanilla JavaScript – fakescroll

Demo Download

Makes the regular browser scrollbar fully customizable via CSS.


10. Mora Scrollbars

Mora Scrollbars

Demo Download

A vanilla JavaScript library that appends a highly customizable scrollbar to your scrollable container.


More Resources:

Looking for more JavaScript solutions to create custom scrollbars on modern web applications? Here are some resources you might find useful:

You Might Be Interested In: