10 Best Custom Scrollbar Plugins In jQuery And Vanilla JS (2023 Update)
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 15 2023
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.
Mobile-friendly Custom Scrollbar Plugin With jQuery - NiceScroll
An easy yet robust jQuery plugin that allows to append pretty nice, touch-enabled and highly customizable scrollbar to any scrollable area such as browser window, DIV container, iframe, textarea and much more.
nanoScrollerJS - Mac OS X Lion-Styled Scrollbars
A jQuery Plugin that allows you to create Mac OS X Lion-Styled Scrollbars for your website. It utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.
Facebook-like jQuery Scrollbar Plugin - slimScroll
A simple and lightweight jQuery plugin for transforming any div into a scrollable area with a nice Facebook-Like scrollbar.
Mac OS X Lion Style Scrollbar Plugin For jQuery - Lionbars
A jQuery plugin that add a Mac OS X Lion style scrollbar to your html container containing overflowed long content.
Vanilla Custom Scrollbar Libraries:
Performant Custom Scrollbar JavaScript Library – SimpleBar
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.
Customizable Scrollbar With Smooth Scroll – smooth-scrollbar
A JavaScript library used to create a customizable, performant scrollbar with smooth scrolling effects for scrollable content.
OverlayScrollbars
OverlayScrollbars is a JavaScript library used to create elegant, customizable and themeable scrollbars on any scrollable elements.
baron
A small, fast and crossbrowser custom scrollbar with native system scroll mechanic.
Vanilla JavaScript Library For Custom Scrollbars – SimpleScrollbar
A simple, lightweight, ES6 compatible vanilla JavaScript library to create a custom scrollbar on your scrollable content on mouse hover.
Conclusion:
Seeking more jQuery plugins or JavaScript libraries to create awesome Custom Scrollbars on the web & mobile? See jQuery Scrollbar and JavaScript Scrollbar sections for more details.