文档章节

20 jQuery Scrollbar plugin with examples

mickelfeng
 mickelfeng
发布于 2014/01/23 15:02
字数 891
阅读 213
收藏 0

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


本文转载自:http://www.jqueryrain.com/2012/07/jquery-scrollbar-plugin-examples/

mickelfeng

mickelfeng

粉丝 237
博文 2791
码字总数 604314
作品 0
成都
高级程序员
私信 提问
35+ 个 jQuery 实现的动画技术教程

Experimental CSS3 Animations for Image Transitions Item Blur Effect with CSS3 and jQuery Experiments with background-clip: text Lateral On-Scroll Sliding with jQuery Typography ......

红薯
2012/01/04
5.3K
0
2月份热门的 24 个 jQuery 插件

1. turn.js turn.js 是一个实现类似书本翻页的网页效果的JS库。 2. jQuery Scroll Path It's a plugin for defining custom scroll paths. It uses canvas flavored syntax to draw lines a......

红薯
2012/03/01
2.7K
5
jquery-nicescroll 的使用

Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style. NOW support HORIZONAL scrollbar too! It supports DIVs, IFrames, textarea, and document p......

大叔做web前端
2014/04/28
1K
1
2014年140个最好的jQuery插件集合

Material Design Preloader Want to create a Google’s latest Material Design look-alike pre-loader? If yes, this jQuery plugin created by Aaron Lumsden will help you do so and y......

IanSun
2015/03/14
776
0
10 个新鲜奇妙的 jQuery 插件

每个月都有很多新的 jQuery 插件推出,虽然大多数都很基础,了无新意。但也的确有不少是非常有意思的。我们这里列出 10 个新的奇妙的 jQuery 插件: jqtimeline Download: http://goto.io/jq...

oschina
2013/11/20
7.9K
17

没有更多内容

加载失败,请刷新页面

加载更多

Experts say the weaker pound is drawing investors to the UK tech sector

UK tech companies secured a record £5.5bn in foreign investment in the first seven months of this year, research shows. This was more than the amount invested per capita in th......

wowloop
14分钟前
5
0
Add support for Android 9-patch images in BorderImage

The 9-patch image implementation in Qt Quick Controls 1 is an internal implementation detail of the Android style. It cannot handle .9.png image files out of the box, but takes ......

shzwork
18分钟前
4
0
c/c++日期时间处理函数小结

日期时间处理函数: 日期时间转为字符串 strftime/std::put_time 字符串解析成日期时间 strptime/std::get_time 时间结构转换:time_t->tm localtime:time_t->tm 时间结构转换:tm->time_t ...

chuqq
22分钟前
4
0
Apache Flink 进阶入门(二):Time 深度解析

前言 Flink 的 API 大体上可以划分为三个层次:处于最底层的 ProcessFunction、中间一层的 DataStream API 和最上层的 SQL/Table API,这三层中的每一层都非常依赖于时间属性。时间属性是流处...

大涛学长
23分钟前
3
0
创龙基于Xilinx Artix-7系列FPGA处理器

SOM-TLA7是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板,可配套广州创龙Artix-7开发板使用。核心板尺寸仅70mm*50mm,采用沉金无铅工艺的10层板设计,专业的PCB Layout保证信号...

Tronlong创龙
30分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部