添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 建站教程 > JavaScript教程 >

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

時間:2014-09-22      來源:chinaz.com     
一、Perfect ScrollBar功能描述

Perfect ScrollBar能夠描繪出異乎尋常的頁面UI描繪。如果你希望能夠設計出與眾不同的頁面UI設計的話,Perfect ScrollBar可能就是你尋找的解決方案,一個簡略可是十分棒的滾動條描繪插件。
Perfect ScrollBar下載

 

js滾動條美化perfectScrollbar插件使用方法-【科e互聯】

 

二、Perfect ScrollBar主要特性:

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

 

三、Perfect ScrollBar使用要求:

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

 

四、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.wiwgwy.live

相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
彩票中奖指