超棒的自定義超酷滾動條jQuery插件 - Perfect Scrollbar

可能大家厭倦了千篇一律的頁面滾動條，如果你希望能夠設計出與眾不同的頁面UI設計的話，Perfect ScrollBar可能就是你尋找的解決方案。

這個滾動條來自于一個個人項目，一個簡單但是非常棒的滾動條設計。
主要特性：

• 不需要修改任何的元素的css
• 滾動條不影響最初的頁面布局設計
• 滾動條支持完整的自定義
• 滾動條的尺寸和位置會隨著容器尺寸或者內容的變化而變化
• 依賴于jQuery和相關幾個類庫
• 不需要定義寬度和高度。它會固定在容器的右下
• 你可以修改任何滾動條的樣式，不依賴于其它腳本
• 滾動條支持'update'方法。如果你需要修改滾動條的位置和大小，只需要調用這個方法即可
• 不使用'scrollTop'和'scrollLeft'，不是用任何絕對定位

使用要求：

• 必須有一個內容元素
• 容器必須擁有一個'position'的CSS樣式定義
• 滾動條的position必須是'absolute'
• scrollbar-x必須擁有一個bottom的樣式定義，scrollbar-必須有一個'right'的樣式定義

如何使用：

HTML代碼

<style>   #Demo { position: 'relative'; } </style> 
<div id='Demo'>   <div>     ...   </div> </div>

javascript

$('#Demo').perfectScrollbar();

如果容器大小或者位置變化了，調用如下方法即可：

$('#Demo').perfectScrollbar('update');

如果你需要銷毀，調用如下：

$('#Demo').perfectScrollbar('destroy');

如果你需要滾動到某一個特定位置，調用如下：

$("#Demo").scrollTop(0); 
$("#Demo").perfectScrollbar('update');

如果你需要支持鼠標滾輪支持，請包含這個插件： jquery-mousewheel，它能夠幫助你添加鼠標滾輪支持。

via gbtags

來源：超棒的自定義超酷滾動條jQuery插件 - Perfect Scrollbar