10 Best Custom Scrollbar JavaScript Libraries (2024 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 Jan 15, 2024

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

Performant Custom Scrollbar JavaScript Library – SimpleBar

[Demo] [Download]

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.


2. Customizable Scrollbar With Smooth Scroll – smooth-scrollbar

Customizable Scrollbar With Smooth Scroll – smooth-scrollbar

[Demo] [Download]

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


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

Beautify Native Scrollbar With Custom CSS - 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. Vanilla JavaScript Library For Custom Scrollbars – SimpleScrollbar

Vanilla JavaScript Library For Custom Scrollbars – SimpleScrollbar

[Demo] [Download]

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


6. Lightweight Mobile-compatible Custom Scrollbar Library – letmescroll.js

Lightweight Mobile-compatible Custom Scrollbar Library – letmescroll.js

[Demo] [Download]

Custom overlay-scrollbars with native scrolling mechanism for web applications.


7. Stylish Custom Scrollbar In Pure JavaScript – MiniBar

MiniBar

[Demo] [Download]

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


8. Lightweight Customizable Scrollbar Library – Optiscroll

Lightweight Customizable Scrollbar Library – Optiscroll

[Demo] [Download]

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


9. Cross-browser Smooth Scrollbar In Vanilla JavaScript – 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.


10. Minimal Custom Scrollbar In Vanilla JavaScript – fakescroll

Minimal Custom Scrollbar In Vanilla JavaScript - fakescroll-min

[Demo] [Download]

This is the vanilla JavaScript version of the jQuery fakescroll plugin which makes the regular browser scrollbar fully customizable via CSS.


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: