自定义滚动条jQuery插件- Perfect Scrollbar
主要特性：
- 不需要修改任何的元素的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
