jQuery制作仿MacLionOS滚动条效果_jquery

代码如下:

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

代码如下:
.nano { background: #bba; width: 500px; height: 500px; }
.nano > .nano-content { padding: 10px; }
.nano > .nano-pane { background: #888; }
.nano > .nano-pane > .nano-slider { background: #111; }

JAVASCRIPT

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

代码如下:

iOSNativeScrolling

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

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

默认值 ：false。

代码如下:
$(".nano").nanoScroller({ iOSNativeScrolling: true });

sliderMinHeight

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

默认值 ：20。

代码如下:
$(".nano").nanoScroller({ sliderMinHeight: 40 })

sliderMaxHeight

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

默认值 ：null。

代码如下:
$(".nano").nanoScroller({ sliderMaxHeight: 200 });

preventPageScrolling

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

默认值 ：false。

代码如下:
$(".nano").nanoScroller({ preventPageScrolling: true });

disableResize

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

默认值 ：false。

代码如下:
$(".nano").nanoScroller({ disableResize: true });

alwaysVisible

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

默认值 ：false。

代码如下:
$(".nano").nanoScroller({ alwaysVisible: true });

flashDelay

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

默认值 ：1500。

代码如下:
$(".nano").nanoScroller({ flashDelay: 1000 });

paneClass

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

默认值 ： 'nano-pane'。

代码如下:
$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

contentClass

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

默认值 ： 'nano-content'。

代码如下:
$(".nano").nanoScroller({ contentClass: 'sliderContent' });

tabIndex

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

默认值 ：0。

代码如下:
$(".nano").nanoScroller({ tabIndex: 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：

代码如下:

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com