修改瀏覽器默認滾動條插件

js滾動條美化perfectScrollbar插件使用方法

1、Perfect ScrollBar功能描述 Perfect ScrollBar可以描繪出異乎尋常的頁面UI描繪。若是你但願可以設計出不同凡響的頁面UI設計的話，Perfect ScrollBar可能就是你尋找的解決方案，一個簡略但是十分棒的滾動條描繪插件。

js滾動條美化perfectScrollbar插件使用方法

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

更多網站建設知識、教程www.internetke.com