10 Best Custom Scroll Bar Plugins In jQuery And Vanilla JS (2021 Update)

by jQueryScript,

These 10 Best Custom Scroll Bar plugins enable you to beautify and enhance the native & ugly browser scrollbars.

Some of these plugins also supports scrollable container and horizontal scrollbars. I hope you like it.

YOU MIGHT NOT NEED JavaScript! You can also apply your own CSS styles to the native browser scrollbars the ::-webkit-scrollbar CSS pseudo-element.

/* 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;
}

Originally Published Dec 22 2017, updated Jan 20 2021

Table of contents:

jQuery Custom Scrollbar Plugins:

jQuery Custom Scrollbar Plugin - malihu

malihu is a jQuery plugin that allows you to beautify your content scrollbar with CSS and jQuery UI.

jQuery Custom Scrollbar Plugin - malihu

[Demo] [Download]


Highly Customizable Custom Overlay Scrollbar Plugin With jQuery

The jQuery OverlayScrollbars plugin provides a simple way to create customizable, themeable overlay scrollbars on any scrollable element while preserving the native scroll functionality.

Highly Customizable Custom Overlay Scrollbar Plugin With jQuery

[Demo] [Download]


Double Scrollbar For Scrollable Container - jQuery DoubleScroll

DoubleScroll is a lightweight jQuery plugin that creates an additional scrollbar on the top of the scrollable container when the bottom scrollbar is present.

Double Scrollbar For Scrollable Container - jQuery DoubleScroll

[Demo] [Download]


User-friendly Scrollbar For Scrollable Content - horizontal.scroll.js

horizontal.scroll.js is a jQuery plugin that attaches an interactive, user-friendly, horizontal scrollbar to your scrollable content.

User-friendly Scrollbar For Scrollable Content - horizontal.scroll.js

[Demo] [Download]


Floating Scrollbar For Long Content - jQuery floating-scroll

floating-scroll is a jQuery plugin which appends a floating horizontal scrollbar to the bottom of the webpage so the long content will always be scrollable as you scroll down.

Floating Scrollbar For Long Content - jQuery floating-scroll

[Demo] [Download]


Vanilla Custom Scrollbar Libraries:

Tiny JavaScript Plugin For Beautifying Scrollbar - perfect-scrollbar

perfect-scrollbar is a lightweight JavaScript plugin that allows you to beautify the default scroll bars without changing or adding any style on original elements.

Tiny JavaScript Plugin For Beautifying Scrollbar - perfect-scrollbar

[Demo] [Download]


smooth-scrollbar

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

smooth-scrollbar

Demo Download


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.

Performant Custom Scrollbar JavaScript Library SimpleBar

Demo Download


OverlayScrollbars

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

Elegant Themeable Custom Scrollbar OverlayScrollbars

Demo Download


slim-scroll

Slim-scroll is a Pure JavaScript plugin to replace the native browser scrollbar with one that can be easily customized via CSS.

Minimal Custom Scrollbar In Vanilla JavaScript fakescroll

Demo Download


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Custom Scroll Bars on the web & mobile? Check out the jQuery Scroll Bar and JavaScript Scrollbar sections.

See also: