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