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 <header> 中引入 nanoscroller.css 文件。

你必須為容器指定一個寬度和高度，并為你的滾動條定制一些基本樣式，例如：

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

設置為 true 關閉滾動條停止時自動隱藏功能：

默認值 ：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插件的使用方法，希望大家能夠喜歡。