In this Article we are providing best jQuery scrollbar plugin with examples.Due to increasing popularity of custom scrollbar we are providing a list of lightweight ,stylish,flexible and easy to use scrollbar in jQuery which work consistently across all modern browsers.These plugins make your site more attractive and gives a modern look.
1. NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
Nicescroll (as nice scroll for browsers) is a jquery (since 1.5) plugin, for nice scrollbars with a very similar ios/mobile style. It supports DIVs, IFrames and document page (body) scrollbars.Compatible with iOS devices as iPad. So you have scrollable divs for iPad.
2. nanoScroller a Lion-styled jQuery scrollbars
nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website.
3. jQuery custom content scroller
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width.
4. Tiny Scrollbar – A lightweight jQuery plugin
Tiny Scrollbar can be used for scrolling content. It was built using the JavaScript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives web designers a powerful way of enhancing a websites user interface.
5. Scrollbar Visibility with jScrollPane
Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior.
6. jScrollPane – custom cross-browser scrollbars
jScrollPane is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled.jScrollPane is designed to be flexible but very easy to use.
7. Scrollbar Paper
Scrollbar Paper does not replace browser’s default scrollbar.Instead, it covers it with a custom scrollbar, like paper on a wall: that is why it is called Scrollbar Paper.
8. jQuery Scrollbars v2
jQuery plugin. Fully themable and adjustable scrollbars. Automatically adjusts if scrollbars are not required. Fallback to regular scrollbars if JavaScript is disabled.
9. ShortScroll – A jQuery UI Google Wave style scroll bar
Scroll bar in Google Wave was the best UI feature in the whole app. It added functionality and style making much better than the browser default scroll bar. So I thought that I would create a scroll bar like it as a jQuery UI widget.
10. Vertical scrollbar using jQuery UI slider
The code assumes a div with fixed height (#scroll-pane or .scroll-pane in my examples) which contains the content for scrolling. The script wraps the contents of the div to be scrolled in another div (.scroll-content) which is used positioned absolutely, and then the top value of #scroll-content is changed via the slider to make the content scroll up and down. The scrollbar itself is positioned within #scroll-pane, using absolute positioning on the right hand side, but it can go anywhere you like.
11. Plugin Scrollbar.js
This plugin has only one purpose. That create a scrollbar in a desired item to display a content larger than that of visible space. It caters for those (and those) who want to see the browser’s scrollbar. Management Sroll wheel is also included in this plugin, but is deactivated.Many things are easily configured, the size and position of the scrollbar, button. It is also possible to define multiple styles.
12. iScroll 4 : Scrolling Features for Mobile Webkit
iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability.
13. jScrollbar : Scrollbar for scrolling contents with jQuery UI
Make your own scrollbar design with jScrollbar.jScrollbar is can be full CSS skinnable (you can use images instead) and can be combined with the mousewheel.
14. jQuery ScrollBar Widget : jqWidgets
15. jQuery plugin to style scrollbars (cross-browser compatible)
16. Gmail style Scrollbar Using jQuery and CSS
Scrollbar looks like in new Gmail theme. The code written in jQuery and CSS.
17. Facebook/Twitter style Scrollbar Using jQuery and CSS
The Facebook and Twitter have their own scrollbars styles. Are you looking for the same thing? Here is the code which is written in jQuery and CSS.
18. Scrollbars V2
Scrollbars V2 is a jQuery plugin that allows you to theme any elements with the simple CSS you already know. It feature filled yet lightweight, the perfect combination to add that little spark to your special creation.
19. RollBar – jQuery ScrollBar Plugin
RollBar plugin was created with idea to replace standard browser scrollbars and make them customizable to fit perfectly in almost any site design. This plugin can be used not only as replacement of native browser scrollbars, but even to create slideshows with external controls. Among other features RollBar can auto adjust to window size, recognize touch events on Android and iOS devices and respond to custom jquery events to scroll content.
Useful post. Thanks for sharing such a wonderful collection.
This post is very useful for me…Thanks alot….
thanks really need one of this for my project
Good one for Mobile
Nice example. Very Useful for developers
Thanks for these. I like the nano best!
thanks for sharing
Great! Thanks!
Nice…collection thanks for sharing.It is useful for me.
I’m not a webdesigner and am clueless at code,I am using a program called Webeasy 9 and i love these scroll bars..Does anyone know the simple procedure to insert the code into my custom CSS and give me step by step instructions Please !? Thanks
Useful post. I was looking for that kind of information on scrollbars. Thanks.
Useful post, thanks for sharing.
hi
thanks a lot for sharing .
Thank you for your run down of scrollbar plugins.
One you may also be interested in is Lazybars.
Hi,
does exist some scrollbar plugin or something which works with iframe element too?
I have tried a lot of these, but still I didn’t find any to work.
Thank you.
Nice Work. Thanks for sharing.
wow , so nice ,thank you
Thanks for sharing!
But I’m looking for a custom scroll bar for the invisible div (tab, slideshow or accordion). Somebody help me?
Thanks share for this post, very nice
really very use ful…………
Thank you very much for sharing..