Top 7 Free Custom Scrollbar Scripts (JavaScript and jQuery Plugins) For Your Webpage

Scrollbars are one of the critical elements of the browser UI that lets us access information that’s out of view. As such CSS has steadfastly refused to yield much in the way of letting developers style their appearance. Using JavaScript, however, the sky becomes in the limit, by replacing the scrollbar UI with a custom one. Critics of custom scrollbars argue against making any drastic changes to such an essential and familiar interface, though in my opinion that thinking is outdated. Can you imagine Facebook on desktop with the native, ugly scrollbar instead of the slim, non intrusive scrollbar that shows up only when you hover over the status feed? In this post I’ll detail 7 of the best, free custom scrollbar JavaScript and jQuery Plugins in 2017 you can use to completely replace the default browser scrollbar without sacrificing browser performance or usability across different devices.

SimpleBar

SimpleBar a performant vertical custom scrollbar JavaScript that uses the browser’s native scroll mechanics when scrolling, and merely shows a custom scrollbar over the native UI. It disables itself on mobile and device with “floating” scrollbars (macbook trackpad for example) where it’s not needed.

1. Highly performant, as the script doesn’t overwrite and mimic browser scrolling, but simply overlays the native scrollbar with a custom one.
2. Disables itself on mobile and device with native “floating” scrollbars (macbook trackpad for example) where it’s not needed.
3. Works in IE11+ and all other modern browsers. IE10 can be supported with some minor tweaking.

In a nutshell: Good script to use if you only need vertical custom scrollbars and modern browsers support (IE11+).

Demo Github

Perfect ScrollBar

Perfect Scrollbar may not be perfect, but it’s getting there. This JavaScript lets you add a custom scrollbar to scrollable elements on the page (except the BODY element) when you hover over it. Designed to be as unobtrusive as possible, it doesn’t alter the target container’s original styles in any way, simply adding a custom scrollbar over it. Any changes to the container’s dimensions are automatically accounted for (great for responsive design).

1. Works with or without jQuery
2. Works with any container on the page with the “position” and “overflow:hidden” CSS properties set.
3. Both vertical and horizontal custom scrollbars supported.
4. Scrollbar enlarges on hover to more easily grab it.
5. Doesn’t alter the original container’s style in any way, just adds to it a scrollbar
6. Adjusts to changes in the container’s dimensions automatically.
7. Supports RTL perfectly on both WebKit and Gecko based browsers.
8. Supports a CDN hosted version so you don’t need to download the core .js and .css files.

In a nutshell: Excellent all around custom scrollbar for most users. Fires many scroll related events for developers. CDN version available for fast deployment.

Demo Github

Malihu custom scrollbar plugin

Malihu supports vertical/horizontal scrollbars, scrolling momentum, plus mouse-wheel, keyboard and touch response. It comes with several themes to easily experiment with different looks. A browser pleaser, the plugin works across a wide array of browsers, including IE8. It does however, require jQuery to work.

• Requires jQuery 1.6 or higher
• Vertical and/or horizontal scrollbar(s)
• Adjustable scrolling momentum
• Mouse-wheel, keyboard and touch support
• Ready-to-use themes and customization via CSS
• RTL direction support
• Option parameters for full control of scrollbar functionality
• Methods for triggering actions like scroll-to, update, destroy etc.
• User-defined callbacks
• Selectable/searchable content

In a nutshell: Requires jQuery 1.6. Lots of ready to use themes out of the box for those looking to differentiate their custom scrollbar easily. Comes with lots of scroll events and actions for developers.

Demo Github

jQuery Scrollbar Plugin

jQuery scrollbar is easy to implement and comes with a whole laundry list of features. Two noteworthy features are that the custom scrollbar can be positioned outside the target container (see screenshot), and also added to textareas (which a lot of its peers don’t support). It also comes with extensive legacy IE7+ browsers support, if you need that kind of thing.

• Requires jQuery
• No fixed height or width
• Responsive design support
• Vertical, horizontal or both scrollbars
• Automatically reinitialize scrollbar
• Scrollbars can be outside target container
• Browser support: IE7+, Firefox, Opera, Chrome, Safari
• jQuery Scrollbar as Angular.JS directive
• Textarea and document scrollbar support
• RTL support

In a nutshell: Requires jQuery. Scrollbars can be displayed outside scroll container, and also used to replace a form TEXTAREA’s scrollbar. Legacy IE browsers support.

Demo Github

NiceScroll 3

NiceScroll 3 is a not so subtle custom scrollbar that comes with a boatload of options to fine tune how it should behave on desktop and mobile browsers. It is one of the only JavaScripts that advertise its ability to replace the main document scrollbar, on top of iframes and textareas, for those that really want to go all out. It also comes with an unique “zoom” feature that lets users expand the scrolling container to fill the whole page for easy reading.

• Requires jQuery (1.8.3+ recommended)
• Works on IFrames, textarea, and document page (body) scrollbars.
• Scrollbar resembles native scrollbar functions closely: Dragging, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
• Zoom feature: Scrollable content can expand to fill entire page
• Dragging scroll mode with scrolling momentum
• Browser support: IE6+ and modern browsers

In a nutshell: jQuery required. Can replace the main document scrollbar for those looking to do that. Scrollable content can expand to fill entire page by clicking on a control.

Demo Github

Baron Native Scroll with Custom Scrollbar

Baron is a small custom scrollbar script that uses native scrolling for optimal performance, and can be nested as well. Vertical, horizontal and bidirectional scroll are supported, and CSS can be used to fully customize its look. Like most of the custom scrollbars we list here, Baron just hides the system scrollbar without removing it. This guarantees scrolling will work on any system.

• Works with or without jQuery
• Doesn’t replace native system scroll mechanic.
• Customizable scrollbar design with full CSS support.
• Can be initiated on hidden blocks
• Vertical, horizontal and bidirectional scroll
• Infinite scroll
• Nested scrollers
• Browser support: IE6+, modern browers

In a nutshell: Can be added to hidden containers, and also nested. With plugin headers can become fixed once user scrolls past them.

Demo Github

React Custom Scrollbars

Last but not least, for those working with the React JavaScript Library, React Custom Scrollbars is one of the best integrated, React centric custom scrollbar for your web apps. Installation is via npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

• Frictionless native browser scrolling
• Doesn’t replace native scrollbars on mobile devices
• Runs on both the client and server environment
• requestAnimationFrame for 60fps
• No extra stylsheet used out of the box
• Well tested, 100% code coverage

In a nutshell: Our top choice for a clean, React based custom scrollbar that works both on the client and server end.

Demo Github

Conclusion

Facebook gave the entire web design community the go ahead when it started using custom scrollbars on its status feed UI. Modern day custom scrollbars maintain a similar level of scrolling experience as their native counterpart while finally letting us modify their look to blend in with our page’s design and aesthetics. Function and design can finally come together with custom scrollbar scripts.