- Highly performant, as the script doesn’t overwrite and mimic browser scrolling, but simply overlays the native scrollbar with a custom one.
- Disables itself on mobile and device with native “floating” scrollbars (macbook trackpad for example) where it’s not needed.
- 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+).
- Works with or without jQuery
- Works with any container on the page with the “
position” and “
overflow:hidden” CSS properties set.
- Both vertical and horizontal custom scrollbars supported.
- Scrollbar enlarges on hover to more easily grab it.
- Doesn’t alter the original container’s style in any way, just adds to it a scrollbar
- Adjusts to changes in the container’s dimensions automatically.
- Supports RTL perfectly on both WebKit and Gecko based browsers.
- 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.
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.
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.
- 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.
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.
- Frictionless native browser scrolling
- Doesn’t replace native scrollbars on mobile devices
- Runs on both the client and server environment
- 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.
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.