20 jQuery Scrollbar plugin with examples

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.

NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices

Read More Demo

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.

nanoScroller a Lion-styled jQuery scrollbars

Read More Demo

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.

jQuery custom content scroller

Read More Demo

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.

Tiny Scrollbar – A lightweight jQuery plugin

Read More Demo

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.

Scrollbar Visibility with jScrollPane

Read More Demo

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.

jScrollPane – custom cross-browser scrollbars

Read More Demo

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.

Scrollbar Paper in jQuery

Read More Demo

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.

jQuery Scrollbars v2

Read More Demo

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.

ShortScroll – A jQuery UI Google Wave style scroll bar

Read More Demo

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.

Vertical scrollbar using jQuery UI slider

Read More Demo

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.

Plugin Scrollbar.js

Read More Demo

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.

iScroll 4 : Scrolling Features for Mobile Webkit

Read More Demo

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.

jScrollbar : Scrollbar for scrolling contents with jQuery UI

Read More Demo

14. jQuery ScrollBar Widget : jqWidgets

jQuery ScrollBar Widget : jqWidgets

Read More Demo

15. jQuery plugin to style scrollbars (cross-browser compatible)

jQuery plugin to style scrollbars (cross-browser compatible)

Read More Demo

16. Gmail style Scrollbar Using jQuery and CSS

Scrollbar looks like in new Gmail theme. The code written in jQuery and CSS.

Gmail style Scrollbar Using jQuery and CSS

Read More Demo

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.

Facebook/Twitter style Scrollbar Using jQuery and CSS

Read More Demo

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.

jquery Scrollbars V2

Read More Demo

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.

RollBar – jQuery ScrollBar Plugin

Read More Demo

Best jQuery website design gallery

18 Replies to 20 jQuery Scrollbar plugin with examples

  1. Siva says:

    Useful post. Thanks for sharing such a wonderful collection.

  2. aditia says:

    thanks really need one of this for my project

  3. Subrahmanyam says:

    Good one for Mobile

  4. Riyaj says:

    Nice example. Very Useful for developers

  5. 1like4me says:

    Thanks for these. I like the nano best!

  6. Arul says:

    thanks for sharing

  7. Evilboynxt says:

    Great! Thanks!

  8. Nice…collection thanks for sharing.It is useful for me.

  9. Dan Stormers says:

    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

  10. Useful post. I was looking for that kind of information on scrollbars. Thanks.

  11. Useful post, thanks for sharing.

  12. ups says:

    hi
    thanks a lot for sharing .

  13. Thank you for your run down of scrollbar plugins.
    One you may also be interested in is Lazybars.

  14. Radinho says:

    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.

  15. Deno says:

    Nice Work. Thanks for sharing.

  16. toussaint says:

    wow , so nice ,thank you

  17. Hieren Feb says:

    Thanks for sharing!
    But I’m looking for a custom scroll bar for the invisible div (tab, slideshow or accordion). Somebody help me?

Leave a Reply