jQuery制作MacOS滚动效果的狮子

nanoscrollerjs是一个jQuery插件，使用一个简单的方法来实现对Mac OS X Lion系统滚动条的效果。滚动条插件使用最小的HTML结构。纳米>。nano-content.the其他滚动条的元素。窗格>。纳米滑块，动态加载插件运行时，滚动条插件可以在iPad上运行，iPhone，并使用原生滚动条一些Android平板电脑。

使用方法

HTML结构

以下是HTML结构，滚动条插件需要工作：

复制代码代码如下所示：
…这里的内容…
可以通过插件参数更改纳米和纳米内容的类名称（相应地更改插件的CSS文件）。

css样式

的nanoscroller.css介绍HTML文件。

复制代码代码如下所示：
您必须指定一个容器的宽度和高度和你的滚动条定制一些基本款式，例如：

复制代码代码如下所示：

。纳米{背景：# BBA；宽度：500px；身高：500px；}

。纳米>。纳米含量{填充：10px；}

。纳米>。纳米玻璃{背景：# 888；}

。纳米>。纳米窗格>。纳米滑块{背景：# 111；}
Javaｓｃｒｉｐｔ

的jquery.nanoscroller.js文件引入页面。

复制代码代码如下所示：
那么下面的方法调用的滚动条插件，和所有的DOM元素。纳米HTML将被应用到这种方法：

复制代码代码如下所示：

$（纳米）。NanoScroller（）；
先进的方法

滚到顶端：

复制代码代码如下所示：

$（纳米）。NanoScroller（{滚动：' ' }）；
滚到底：

复制代码代码如下所示：

$（纳米）。NanoScroller（{滚动：底部的}）；
滚到顶部并取一个偏移值：

复制代码代码如下所示：

$（纳米）。NanoScroller（{ scrollTop：价值}）；
滚动到底部并取一个偏移值：

复制代码代码如下所示：

$（纳米）。NanoScroller（{ scrollbottom：价值}）；
滚动一个元素：

复制代码代码如下所示：

$（纳米）。NanoScroller（{ scrollto：$（' # a_node）}）；
停止滚动操作。此选项将使所有的滚动条插件无效和隐藏在UI滚动条绑定事件。

复制代码代码如下所示：

$（纳米）。NanoScroller（{停止：true}）；
破坏

破坏nanoscroller滚动条和滚动条重置浏览器原生滚动条：

复制代码代码如下所示：

$（纳米）。NanoScroller（{破坏：true}）；
设置滚动条的闪烁，闪烁的时间设置的参数（默认1.5秒）。

复制代码代码如下所示：

$（纳米）。NanoScroller（{闪：真}）；
NanoScroller（）；

刷新滚动条。手术只会重新计算滚动条的位置和高度。

复制代码代码如下所示：

$（纳米）。NanoScroller（）；
自定义事件

scrollend

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

复制代码代码如下所示：

$（纳米）。Bind（scrollend

console.log（当前htmldivelement

}）；
有些浏览器会触发事件在同一时间，很多次，所以jQuery。绑定或，应该用来绑定事件。你可以使用jQuery的插件使消浏览器触发此事件每100毫秒。

复制代码代码如下所示：

$（纳米）。Debounce（scrollend

警报（结束）；

}，100）；
scrollTop

作为scrollend事件一样，这是引发用户每次滚到容器的顶部。

作为scrollend事件和scrollTop事件一样，这是引发用户每次卷轴。事件与当前位置，JS对象参数的最大高度，和滚动条的方向（上升或下降）：

复制代码代码如下所示：

$（）。

Console.debug（值）；

}）；
配置参数

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

iosnativescrolling

如果你想在iOS 5 +使用原生的滚动条，你可以将它设置为true。iOS 5 +产生的滚动条会更好。

注意，当iosnativescrolling设置为true，。。滑块不会产生或添加的设备支持原生滚动条。

默认值：false。

复制代码代码如下所示：

$（纳米）。NanoScroller（{ iosnativescrolling：true}）；
sliderminheight

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

默认值：20。

复制代码代码如下所示：

$（纳米）。NanoScroller（sliderminheight：{ 40 }）
slidermaxheight

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

默认值：null。

复制代码代码如下所示：

$（纳米）。NanoScroller（slidermaxheight：{ 200 }）；
preventpagescrolling

当设置为true时，当容器内容滚动到顶部或底部时，可以停止页滚动。

默认值：false。

复制代码代码如下所示：

$（纳米）。NanoScroller（{ preventpagescrolling：true}）；
disableresize

设置为true，以防止nanoscroller改变大小。如果你设置这个选项，真的，记得打电话给复位的方法，否则会有一个奇怪的问题：

默认值：false。

复制代码代码如下所示：

$（纳米）。NanoScroller（{ disableresize：true}）；
我们

当滚动条停止时，设置为真的关闭自动隐藏功能：

默认值：false。

复制代码代码如下所示：

$（纳米）。NanoScroller（{我们：真}）；
flashdelay

打开闪光灯选项时，此选项用于指定闪烁的延迟时间：

默认值：1500。

复制代码代码如下所示：

$（纳米）。NanoScroller（flashdelay：{ 1000 }）；
paneclass

滚动条的轨道元素的类的名称。如果你修改它，你需要在CSS文件中作出相应的变化：

默认值：'nano-pane。

复制代码代码如下所示：

$（纳米）。NanoScroller（{ sliderclass：'scrollslider}）；
contentclass

The class name of the scrollbar container Div.If you modify it, you need to make the corresponding changes in the CSS file:

默认值：'nano-content。

复制代码代码如下所示：

$（纳米）。NanoScroller（{ contentclass：'slidercontent}）；
属性

设置滚动内容的顺序，并在将其设置为- 1时使用tab键跳过该内容：

默认值：0。

复制代码代码如下所示：

$（纳米）。NanoScroller（{ 0 }作用：）；
浏览器的兼容性

桌面设备

IE7 +

Firefox 3 +

铬

Safari 4 +

Opera 11.60 +

移动设备

iOS 5 +（iPhone，iPad和iPod touch）

iOS 4（带有插件）

Android的浏览器

Android 2.2 2.3原生浏览器（带有插件）

android Opera 11.6（带有插件）

更好的运行nanoscroller通过插件在移动设备上的浏览器

你可以使用overthrow.js使nanoscroller工作在移动浏览器更好。它模拟移动设备上的CSS溢出（溢出：汽车； /溢出：滚动；）。

使用推翻，overthrow.js引入页：

复制代码代码如下所示：
然后添加你的滚动条的内容div推翻阶级：

复制代码代码如下所示：
…这里的内容…
以上是关于nanoscroller插件的使用，希望你能喜欢它。