nanoScrollerJS是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的jQuery插件。该滚动条插件使用最小的HTML结构 .nano > .nano-content 。其它的滚动条元素 .pane > .nano-slider 是在插件运行时动态加载的。该滚动条插件利用原生的滚动条可以工作在 iPad、iPhone 和一些 Android Tablets上。
使用方法
HTML结构
下面是该滚动条插件工作所必须的HTML结构：
代码如下:
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
你必须为容器指定一个宽度和高度，并为你的滚动条定制一些基本样式，例如：
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
默认值 ：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插件的使用方法，希望大家能够喜欢。
原文地址：https://www.jb51.cc/jquery/55787.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
