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.
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…
10. yaSimpleScrollbar
A simple, flexible, lightweight custom scrollbar JavaScript library that supports native browser scroll events and allows to dynamically resize to fit the container.
9. Sheepbar.js
Sheepbar.js is a pure JavaScript custom scrollbar solution that appends a simple, easy-to-style scrollbar to your DIV element containing large web content.
8. Scrolly.js
Scrolly.js is a vanilla JavaScript replacement for the native browser scrollbar. Cross browser and touch compatible. Also has the ability to add a custom scrollbar to any scrollable container. Also can be implemented as a jQuery plugin or a React component.
7. WellScroller
WellScroller is a native JavaScript library for replacing the default browser scrollbar with momentum scrolling support.
6. vanillaScroll
vanillaScroll is a small vanilla JavaScript plugin which turns a block element into a scrollable area with a custom scrollbar.
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.
4. wScroll
wScroll is a simple lightweight JavaScript library that adds a custom scrollbar to scrollable container like divs.
3. scrollbot
scrollbot is a standalone JavaScript library that adds a highly customizable scrollbar to the desired scrollable container.
2. smooth-scrollbar
smooth-scrollbar is a JavaScript library used to create a customizable, performant scrollbar with smooth scrolling effects for scrollable content.
1. SimpleScrollbar
A simple, lightweight, ES6 compatible vanilla JavaScript library to create a custom scrollbar on your scrollable content on mouse hover.