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
smooth-scrollbar is a JavaScript library used to create a customizable, performant scrollbar with smooth scrolling effects for scrollable content.
2. SimpleScrollbar
A simple, lightweight, ES6 compatible vanilla JavaScript library to create a custom scrollbar on your scrollable content on mouse hover.
3. wScroll
wScroll is a simple lightweight JavaScript library that adds a custom scrollbar to scrollable container like divs.
4. scrollbot
scrollbot is a standalone JavaScript library that adds a highly customizable scrollbar to the desired scrollable container.
5. Optiscroll
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
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
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
The Smooth Scrollbar JavaScript library enables you to implement cross-browser, high performance, highly customizable scrollbars with smooth kinetic/momentum scrolling effects.
9. OverlayScrollbars
OverlayScrollbars is a JavaScript library used to create elegant, customizable and themeable scrollbars on any scrollable elements.
10. fakescroll
Makes the regular browser scrollbar fully customizable via CSS.