jQuery制作仿Mac Lion OS滚动条效果

nanoScrollerJS是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的jQuery插件。该滚动条插件使用最小的HTML结构 .nano > .nano-content 。其它的滚动条元素 .pane > .nano-slider 是在插件运行时动态加载的。该滚动条插件利用原生的滚动条可以工作在 iPad、iPhone 和一些 Android Tablets上。

使用方法

HTML结构

下面是该滚动条插件工作所必须的HTML结构：

nano 和 nano-content 的class名称可以通过插件参数来改变（改变后插件的CSS文件也要相应的改变）。

CSS样式

在HTML <header> 中引入 nanoscroller.css 文件。

你必须为容器指定一个宽度和高度，并为你的滚动条定制一些基本样式，例如：

JAVASCRIPT

在页面中引入 jquery.nanoscroller.js 文件。

然后使用下面的方法调用该滚动条插件，HTML中所有带有 .nano 的DOM元素都会被应用上该方法：

高级方法

滚动到顶部：

滚动到底部：

滚动到顶部并带个偏移值：

滚动到底部并带个偏移值：

滚动一个元素：

停止滚动操作。这个选项将会使滚动条插件的所有绑定事件无效，并在UI上隐藏滚动条。

destroy

销毁nanoScroller滚动条并将滚动条重置为浏览器原生滚动条：

设置滚动条闪动，闪动时间由参数来设置（默认1.5秒）。

nanoScroller();

刷新滚动条。该操作会简单的重新计算滚动条的位置和高度：

自定义事件

scrollend

一个自定义的 scrollend 事件会在每次滚动条滚动到容器底部时触发。（当滚动条已经到达容器底部，用户再次滚动时不会触发该事件）

有些浏览器会在同一时间多次触发该事件，所以应该使用jQuery .bind 或 .on 来绑定该事件。你可以使用 jquery-debounce 插件来使浏览器每隔100毫秒才触发一次该事件：

scrolltop

和 scrollend 事件相同，它是每次用户滚动到容器的顶部时触发。

和 scrollend 事件和 scrolltop 事件相同，它在用户每次滚动时触发。该事件附带滚动条当前位置、最大高度和方向（ up 或 down ）的js对象参数:

配置参数

该滚动条插件中有一组参数可以使用：

iOSNativeScrolling

如果你希望在 iOS 5+ 中使用原生的滚动条，可以设置为 true 。在 iOS 5+ 中原生的滚动条会工作的更好。

注意当 iOSNativeScrolling 设置为 true 时， .pane 和 .slider 不会被设备生成/添加来支持原生的滚动条。

默认值 ：false。

sliderMinHeight

设置滚动元素的最小高度：

默认值 ：20。

sliderMaxHeight

设置滚动元素的最大高度：

默认值 ：null。

preventPageScrolling

设置为 true 时可以在容器内容滚动到顶部或底部时阻止页面滚动：

默认值 ：false。

disableResize

设置为 true 阻止nanoscroller改变大小。如果你设置该选项为 true ，记住要调用reset方法，否则会产生奇怪的问题：

默认值 ：false。

alwaysVisible

设置为 true 关闭滚动条停止时自动隐藏功能：

默认值 ：false。

flashDelay

在你开启 flash 选项时，该选项用于指定闪动的延时：

默认值 ：1500。

paneClass

滚动条track元素的class名称。如果你修改了它，需要在CSS文件中做相应的修改：

默认值 ： 'nano-pane'。

contentClass

滚动条容器div的class名称。如果你修改了它，需要在CSS文件中做相应的修改：

默认值 ： 'nano-content'。

tabIndex

设置可滚动内容的顺序，设置为-1时使用tab键会跳过该内容：

默认值 ：0。

浏览器兼容

桌面设备

IE7+
Firefox 3+
Chrome
Safari 4+
Opera 11.60+
移动设备

iOS 5+ (iPhone, iPad 和 iPod Touch)
iOS 4 (附带一个插件)
Android Firefox
Android 2.2/2.3 native browser (附带一个插件)
Android Opera 11.6 (附带一个插件)
通过插件在移动设备浏览器更好的运行nanoScroller

你可以通过 overthrow.js 来使nanoScroller 在移动浏览器上更好的工作。它会在移动设备上模拟CSS的overflow（ overflow: auto;/overflow: scroll; ）。

要使用overthrow，在页面中引入overthrow.js：

然后在你的滚动条内容 div 中添加 overthrow class：

以上就是关于nanoscroller插件的使用方法，希望大家能够喜欢。