Perfect ScrollBar插件使用方法

1、Perfect ScrollBar功能描述

Perfect ScrollBar可以描绘出异乎寻常的页面UI描绘。若是你但愿可以设计出不同凡响的页面UI设计的话，Perfect ScrollBar可能就是你寻找的解决方案，一个简略但是十分棒的滚动条描绘插件。
Perfect ScrollBar下载

 

 

2、Perfect ScrollBar主要特性：

• 不须要修改任何的元素的css
• 滚动条不影响最初的页面布局设计
• 滚动条支持完整的自定义
• 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
• 依赖于jQuery和相关几个类库
• 不须要定义宽度和高度。它会固定在容器的右下
• 你能够修改任何滚动条的样式，不依赖于其它脚本
• 滚动条支持'update'方法。若是你须要修改滚动条的位置和大小，只须要调用这个方法便可
• 不使用'scrollTop'和'scrollLeft'，不是用任何绝对定位

 

3、Perfect ScrollBar使用要求：

• 必须有一个内容元素
• 容器必须拥有一个'position'的CSS样式定义
• 滚动条的position必须是'absolute'
• scrollbar-x必须拥有一个bottom的样式定义，scrollbar-必须有一个'right'的样式定义

 

4、Perfect ScrollBar实例代码：

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’）;