20 jQuery Scrollbar plugin with examples

2014/01/23 15:02
阅读数 269

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

14. jQuery ScrollBar Widget : jqWidgets

jQuery ScrollBar Widget : jqWidgets

Read MoreDemo

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

jQuery plugin to style scrollbars (cross-browser compatible)

Read MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

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 MoreDemo

Best jQuery website design gallery


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部