插件说明：nanoScrollerJS是一个jQuery插件，用简单的方法实现了MacOSXLion系统的滚动条效果。 滚动条插件使用最小的 HTML 结构 .nano>.nano-content。 其他滚动条元素 .pane>.nano-slider 在插件运行时动态加载。 滚动条插件适用于 iPad、iPhone 和一些带有本机滚动条的 Android 平板电脑。
简要教程
nanoScrollerJS是一个jQuery插件，使用简单的方法实现了MacOSXLion系统的滚动条效果。 滚动条插件使用最小的 HTML 结构 .nano>.nano-content。 其他滚动条元素 .pane>.nano-slider 在插件运行时动态加载。 滚动条插件适用于 iPad、iPhone 和一些带有本机滚动条的 Android 平板电脑。
如何使用
HTML结构
下面是滚动条插件工作所需的 HTML 结构：
... content here ...
nano和nano-content的类名可以通过插件参数更改（插件的CSS文件也应相应更改）。
CSS 样式
在HTML中引入nanoscroller.css文件。
您必须指定容器的长度和高度html取消滚动条，并为滚动条自定义一些基本样式，例如：
.nano { background: #bba; width: 500px; height: 500px; }
.nano > .nano-content { padding: 10px; }
.nano > .nano-pane { background: #888; }
.nano > .nano-pane > .nano-slider { background: #111; }
脚本语言
在页面中引入jquery.nanoscroller.js文件。
然后使用下面的方法调用滚动条插件，HTML中所有带.nano的DOM元素都会应用到这个方法：
$(".nano").nanoScroller();
中级方式
滚动
滚动到底部：
$(".nano").nanoScroller({ scroll: 'top' });
滚动到顶部：
$(".nano").nanoScroller({ scroll: 'bottom' });
使用倾斜值滚动到底部：
$(".nano").nanoScroller({ scrollTop: value });
滚动到顶部并显示倾斜值：
$(".nano").nanoScroller({ scrollBottom: value });
滚动一个元素：
$(".nano").nanoScroller({ scrollTo: $('#a_node') });
停止
停止滚动操作。 此选项将禁用滚动条插件的所有绑定并从 UI 中隐藏滚动条。
$(".nano").nanoScroller({ stop: true });
$(".nano").nanoScroller({ destroy: true });
设置滚动条闪烁html取消滚动条，闪烁时间由参数设置（默认1.5秒）。
$(".nano").nanoScroller({ flash: true });
nanoScroller();
刷新滚动条。 此操作将简单地重新评估滚动条的位置和高度：
$(".nano").nanoScroller();
定制风暴
滚动结束
每次滚动条到达容器顶部时都会触发自定义的滚动结束事件。 （当滚动条已经到达容器顶部时，用户再次滚动时不会触发该事件）
$(".nano").bind("scrollend", function(e){
console.log("current HTMLDivElement", e.currentTarget);
});
有些浏览器会同时多次触发storm，所以应该使用jQuery.bind或者.on来绑定storm。 您可以使用 jquery-debounce 插件让浏览器每 100 纳秒触发一次 debounce：
$(".nano").debounce("scrollend", function() {
alert("The end");
}, 100);
滚动顶部
与scrollend事件相同，每次用户滚动到容器底部时都会触发该事件。
更新
与scrollend和scrolltop事件相同，它会在用户每次滚动时触发。 Storm 自带了滚动条当前位置、最大高度和方向（向上或向下）的 js 对象参数：
$(".nano").on("update", function(event, values){
console.debug( values );
});
配置参数
滚动条插件中有一组可用的参数：
iOS 原生滚动
如果你想在iOS5+中使用原生滚动条，可以设置为true。 原生滚动条在 iOS5+ 中会工作得更好。
请注意，当 iOSNativeScrolling 设置为 true 时，设备将不会生成/添加 .pane 和 .slider 以支持本机滚动。
默认值：假。
$(".nano").nanoScroller({ iOSNativeScrolling: true });
滑块最小高度
设置可滚动元素的最小高度：
默认值：20。
$(".nano").nanoScroller({ sliderMinHeight: 40 })
滑块最大高度
设置可滚动元素的最大高度：
默认值：空。
$(".nano").nanoScroller({ sliderMaxHeight: 200 });
防止页面滚动
设置为 true 以防止容器内容滚动到底部或顶部时页面滚动：
默认值：假。
$(".nano").nanoScroller({ preventPageScrolling: true });
禁用调整大小
设置为 true 以防止 nanoscroller 调整大小。 如果将此选项设置为true，记得调用reset方法，否则会导致奇怪的问题：
默认值：假。
$(".nano").nanoScroller({ disableResize: true });
始终可见
设置为true可以关闭滚动条停止时的手动隐藏功能：
默认值：假。
$(".nano").nanoScroller({ alwaysVisible: true });
闪光延迟
当打开闪光选项时，该选项用于指定闪光的延迟时间：
默认值：1500。
$(".nano").nanoScroller({flashDelay:1000});
窗格类
滚动条轨道元素的类名。 如果改变的话，需要在CSS文件中做相应的修改：
默认值：“纳米窗格”。
$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });
内容类
滚动条容器div的类名。 如果改变的话，需要在CSS文件中做相应的修改：
默认值：“纳米内容”。
$(".nano").nanoScroller({ contentClass: 'sliderContent' });
选项卡索引
设置可滚动内容的顺序，设置为-1时，使用tab键跳过内容：
默认值：0。
$(".nano").nanoScroller({ tabIndex: 0 });
浏览器兼容
桌面设备
IE7+
火狐3+
铬合金
Safari4+
Opera11.60+
联通设备
iOS5+（iPhone、iPad 和 iPod Touch）
iOS4（带插件）
安卓 火狐
Android2.2/2.3nativebrowser（带插件）
AndroidOpera11.6（带插件）
通过插件在联通设备浏览器中更好地运行nanoScroller
您可以使用overthrow.js让nanoScroller在联通浏览器上更好地工作。 它将在联通设备上模拟 CSS 溢出（overflow:auto;/overflow:scroll;）。
要使用 overthrot，请将 overthrot.js 导入到页面中：
之后在滚动条内容 div 中添加 overthroclass：
... content here ...
