主要特性：
- 不需要修改任何的元素的css
- 滾動條不影響最初的頁面布局設計
- 滾動條支持完整的自定義
- 滾動條的尺寸和位置會隨着容器尺寸或者內容的變化而變化
- 依賴於jQuery和相關幾個類庫
- 不需要定義寬度和高度。它會固定在容器的右下
- 你可以修改任何滾動條的樣式，不依賴於其它腳本
- 滾動條支持'update'方法。如果你需要修改滾動條的位置和大小，只需要調用這個方法即可
- 不使用'scrollTop'和'scrollLeft'，不是用任何絕對定位
使用要求：
- 必須有一個內容元素
- 容器必須擁有一個'position'的CSS樣式定義
- 滾動條的position必須是'absolute'
- scrollbar-x必須擁有一個bottom的樣式定義，scrollbar-必須有一個'right'的樣式定義
如何使用：
HTML代碼
<!DOCTYPE html> <html> <head> <title>perfect-scrollbar</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/perfect-scrollbar.css" rel="stylesheet"> <style> #Demo {position:relative;margin:0px auto;padding:0px;width:600px;height:400px;overflow:hidden;} #Demo .content {background:#666;width:1280px;height:720px;padding:10px;color:#fff} </style> </head> <body> <div id='Demo'> <div class='content'> <p> 不需要修改任何的元素的css 滾動條不影響最初的頁面布局設計 滾動條支持完整的自定義 滾動條的尺寸和位置會隨着容器尺寸或者內容的變化而變化 依賴於jQuery和相關幾個類庫 不需要定義寬度和高度。它會固定在容器的右下 你可以修改任何滾動條的樣式，不依賴於其它腳本 滾動條支持'update'方法。如果你需要修改滾動條的位置和大小，只需要調用這個方法即可 不使用'scrollTop'和'scrollLeft'，不是用任何絕對定位 </p> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="js/perfect-scrollbar.with-mousewheel.min.js"></script> <script> $(function() { $('#Demo').perfectScrollbar(); }); </script> </body> </html>
javascript
$('#Demo').perfectScrollbar();
如果容器大小或者位置變化了，調用如下方法即可：
$('#Demo').perfectScrollbar('update');
如果你需要銷毀，調用如下：
$('#Demo').perfectScrollbar('destroy');
如果你需要滾動到某一個特定位置，調用如下：
$("#Demo").scrollTop(0);
$("#Demo").perfectScrollbar('update');
如果你需要支持鼠標滾輪支持，請包含這個插件： jquery-mousewheel，它能夠幫助你添加鼠標滾輪支持。
展示地址：http://noraesae.github.io/perfect-scrollbar/
GitHub地址：https://github.com/noraesae/perfect-scrollbar