10 Best Custom Scrollbar JavaScript Libraries Of 2018

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

yaSimpleScrollbar

Demo Download

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

Demo Download

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

Demo Download

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

custom-scrollbar-javascript-library-wellscroller

Demo Download

WellScroller is a native JavaScript library for replacing the default browser scrollbar with momentum scrolling support.


6. vanillaScroll

vanillaScroll

Demo Download

vanillaScroll is a small vanilla JavaScript plugin which turns a block element into a scrollable area with a custom scrollbar.


5. Optiscroll

Optiscroll

Demo Download

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

Demo Download

wScroll is a simple lightweight JavaScript library that adds a custom scrollbar to scrollable container like divs.


3. scrollbot

scrollbot

Demo Download

scrollbot is a standalone JavaScript library that adds a highly customizable scrollbar to the desired scrollable container.


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


1. SimpleScrollbar

SimpleScrollbar

Demo Download

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