mCustomScrollbar 是個基于 jQuery UI 的自定義滾動條插件,它可以讓你靈活的通過 CSS 定義網頁的滾動條,并且垂直和水準兩個方向的滾動條都可以定義,它通過 Brandon Aaron jquery mouse-wheel plugin 提供了滑鼠滾動的支援,并且在滾動的過程中,還可以緩沖滾動使得滾動更加的平滑,還可以自動調整滾動條的位置和定義滾動到的位置等。(HTML必須存在于文檔流, 不能為display:none)
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SM2EjNzgDM3cTMtMDN2QDN0EzNxMDMzAjNxAjMtUDNxczN38CXzAjNxAjMvwVN0EzN3czLcd2bsJ2Lc12bj5ycn9Gbi52YuUTMwIzcldWYtl2Lc9CX6MHc0RHaiojIsJye.png)
1.如何使用 mCustomScrollbar(必須要加載如下的4個檔案)
jquery.mCustomScrollbar.js
jquery.mousewheel.min.js
jquery.mCustomScrollbar.css
mCSB_buttons.png
jQuery:這個插件的必備庫
jQuery UI:擴充 jQuery 庫并且為我們的滾動條提供了簡單的動畫和拖動功能。
jquery.mousewheel.min.js:這是 Brandon Aaron 編寫的一個偉大的隻有2kb的插件,它面向所有的作業系統和浏覽器,為我們提供了滑鼠滾動事件的支援。
jquery.mCustomScrollbar.js:這是我們的插件主檔案。在插件包的 minified 你可以找到它的壓縮版。
jquery.mCustomScrollbar.css: 這個 CSS 檔案是讓我們來定義邊欄用的。你可以在這個檔案中定義你的邊欄,當然你可以在其他的 CSS 檔案中定義,要注意的是,你要用 CSS 中的順序,其中的優先級關系來覆寫這個檔案中的定義。
mCSB_buttons.png: 這個 png 圖檔檔案,包含了向上向下向左向右滾動的按鈕。可以使用 CSS sprites 技術,來使用這個圖檔中的相應按鈕。插件包中包含了這個圖檔的 PSD 源檔案(sources/mCSB_buttons.psd ),你可以根據自己的需求自定義。
其實如果隻是簡單的滾動條,隻要加載如下2個檔案即可
jquery.mCustomScrollbar.js
jquery.mCustomScrollbar.css
第一步:加載 mCustomScrollbar 的樣式檔案。
<link href="css/jquery.mCustomScrollbar.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
第二步:加載必須的 JS 檔案。
需要加載的檔案有如下幾個:jQuery、jQuery UI, jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js 這四個。
jQuery 和 jQuery UI 是必須的, jquery.mousewheel.min.js 是用來提供滾動支援的,jquery.mCustomScrollbar.js 則是插件的主檔案。
<script src="js/jquery.mCustomScrollbar.js" type="text/javascript"><\/script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"><\/script>
第三步:應用 mCustomScrollbar
$(function(){
$("#id").mCustomScrollbar();
})
mCustomScrollbar 的參數介紹
setWidth: false //設定你内容的寬度 值可以是像素值或者百分比(string),取值300,"30%"
setHeight: false //設定你内容的高度 值可以是像素值或者百分比(string),取值300,"30%"
setTop: 0 //設定一開始縱向滾動的位置,取值"100px",值為字元串
setLeft: 0 //設定一開始橫向滾動的位置,取值"100px",值為字元串
axis: "string" //"x","y",值為字元串,分别對應橫縱向滾動
scrollInertia:Integer //滾動的慣性值 在毫秒中 使用0可以無滾動慣性 (滾動慣性可以使區塊滾動更加平滑)
scrollbarPosition: "string" //取值"inside","outside",值為字元串,父元素必須是relative定位,滾動條出在元素的内部(inside)或者外部(outside);
autoDraggerLength:Boolean: //根據内容區域自動調整滾動條拖塊的長度 值:true,false
alwaysShowScrollbar:Integer //保持滾動條的顯示,取值0,1(保持滾動塊可見),2(保持滾動條所有的顯示)
mouseWheel:{
enable: boolean //啟用或禁用通過滑鼠滾輪滾動内容。
scrollAmount: Integer //滾輪滾動的像素
invert: boolean //反轉滾動方向
}
scrollButtons:{ enable:Boolean } //是否添加 滾動條兩端按鈕支援 值:true,false
scrollButtons:{ scrollType:String } //滾動按鈕滾動類型 值:”continuous”(當你點選滾動控制按鈕時斷斷續續滾動) “pixels”(根據每次點選的像素數來滾動) 點選這裡可以看到形象的例子
scrollButtons:{ scrollSpeed:Integer } //設定點選滾動按鈕時候的滾動速度(預設 20) 設定一個更高的數值可以更快的滾動
scrollButtons:{ scrollAmount:Integer } //設定點選滾動按鈕時候每次滾動的數值 像素機關 預設 40像素
advanced:{ updateOnBrowserResize:Boolean } //根據百分比為自适應布局 調整浏覽器上滾動條的大小 值:true,false 設定 false 如果你的内容塊已經被固定大小
advanced:{ updateOnContentResize:Boolean } //自動根據動态變換的内容調整滾動條的大小 值:true,false 設定成 true 将會不斷的檢查内容的長度并且據此改變滾動條大小 建議除非必要不要設定成 true 如果頁面中有很多滾動條的時候 它有可能會産生額外的移出 你可以使用 update 方法來替代這個功能
advanced:{ autoExpandHorizontalScroll:Boolean } //自動擴大水準滾動條的長度 值:true,false 設定 true 你可以根據内容的動态變化自動調整大小 可以看Demo
advanced:{ autoScrollOnFocus:Boolean } //是否自動滾動到聚焦中的對象 例如表單使用類似TAB鍵那樣跳轉焦點 值:true false
callbacks:{ onScrollStart:function(){} } //使用自定義的回調函數在滾動時間開始的時候執行 具體請看Demo
callbacks:{ onScroll:function(){} } //自定義回調函數在滾動中執行 Demo 同上
callbacks:{ onTotalScroll:function(){} } //當滾動到底部的時候調用這個自定義回調函數 Demo 同上
callbacks:{ onTotalScrollBack:function(){} } //當滾動到頂部的時候調用這個自定義回調函數 Demo 同上
callbacks:{ onTotalScrollOffset:Integer } //設定到達頂部或者底部的偏移量 像素機關
callbacks:{ whileScrolling:function(){} } //當使用者正在滾動的時候執行這個自定義回調函數
callbacks:{ whileScrollingInterval:Integer } //設定調用 whileScrolling 回調函數的時間間隔 毫秒機關
//預設值
(function($){
$(document).ready(function(){
$("#content").mCustomScrollbar({
setWidth: false,
setHeight: false,
setTop: 0,
setLeft: 0,
axis: "y",
scrollInertia:0,
scrollbarPosition: "inside",
autoDraggerLength:false
autoExpandScrollbar:true
alwaysShowScrollbar:2
mouseWheel:{
enable:true
scrollAmount:10
preventDefault:true
invert:true
},
scrollButtons:{
enable:false,
scrollType:"continuous",
scrollSpeed:20,
scrollAmount:40
},
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:false,
autoExpandHorizontalScroll:false,
autoScrollOnFocus:true
},
callbacks:{
onScrollStart:function(){},
onScroll:function(){},
onTotalScroll:function(){},
onTotalScrollBack:function(){},
onTotalScrollOffset:0,
whileScrolling:false,
whileScrollingInterval:30
}
});
});
})(jQuery);
mCustomScrollbar 的使用方法
update
用法:$(selector).mCustomScrollbar(“update”);
調用 mCustomScrollbar 函數的 update 方法去實時更新滾動條當内容發生變化(例如 通過 Javascript 增加或者移除一個對象、通過 ajax 插入一段新内容、隐藏或者顯示一個新内容等)
下面是例子:
$(".content .mCSB_container").append("<p>New content here...</p>");
$(".content").mCustomScrollbar("update");
$(".content .myImagesContainer").append("<img src='myNewImage.jpg' />");
$(".content .myImagesContainer img").load(function(){
$(".content").mCustomScrollbar("update");
});
$("#content-1").animate({height:800},"slow",function(){
$(this).mCustomScrollbar("update");
});
當新内容完全加載或者動畫完成之後,update 方法一直被調用。
scrollTo
用法:$(selector).mCustomScrollbar(“scrollTo”,position);
你可以使用這個方法自動的滾動到你想要滾動到的位置。這個位置可以使用字元串(例如 “#element-id”,“bottom” 等)描述或者是一個數值(像素機關)。下面的例子将會滾動到最下面的對象
$(".content").mCustomScrollbar("scrollTo","last");
scrollTo 方法的參數
$(selector).mCustomScrollbar(“scrollTo”,String);:滾動到某個對象的位置,字元串型的值可以是 id 或者 class 的名字
$(selector).mCustomScrollbar(“scrollTo”,”top”);:滾動到頂部(垂直滾動條)
$(selector).mCustomScrollbar(“scrollTo”,”bottom”);:滾動到底部(垂直滾動條)
$(selector).mCustomScrollbar(“scrollTo”,”left”);:滾動到最左邊(水準滾動條)
$(selector).mCustomScrollbar(“scrollTo”,”right”);:滾動到最右邊(水準滾動條
$(selector).mCustomScrollbar(“scrollTo”,”first”);:滾動到内容區域中的第一個對象位置
$(selector).mCustomScrollbar(“scrollTo”,”last”);:滾動到内容區域中的最後一個對象位置
$(selector).mCustomScrollbar(“scrollTo”,Integer);:滾動到某個位置(像素機關)
scrollTo 方法還有兩個額外的選項參數
moveDragger: Boolean:滾動滾動條的滑塊到某個位置像素機關,值:true,flase。例如:$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });
callback:Boolean:執行回調函數當 scroll-to 完成之後,值:true,false 例如:$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });
disable
用法:$(selector).mCustomScrollbar(“disable”);
調用 disable 方法去使滾動條不可用。如果想使其重新可用,調用 update方法。disable 方法使用一個可選參數(預設 false)你可以設定 true 如果你想重新讓内容區域滾動當 scrollbar 不可用時。例如:
$(".content").mCustomScrollbar("disable",true);
可以看一些使用 disable 的例子
destroy
用法:$(selector).mCustomScrollbar(“destroy”);
調用 destroy 方法可以移除某個對象的自定義滾動條并且恢複預設樣式
可以看一些使用 destroy 的例子
定義滾動條外觀
滾動條的 HTML 結構
//垂直滾動條結構:
<div class="content mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox">
<div class="mCSB_container">
<!-- your long content here... -->
</div>
<div class="mCSB_scrollTools">
<a class="mCSB_buttonUp"></a>
<div class="mCSB_draggerContainer">
<div class="mCSB_dragger ui-draggable">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
<a class="mCSB_buttonDown"></a>
</div>
</div>
</div>
//水準滾動條 mCSB_buttonUp 和 mCSB_buttonDown 這兩個 a 标簽隻有當你啟用了 scroll buttons 功能的時候,才可用。
<div class="mCustomScrollBox mCSB_horizontal">
<div class="mCSB_container">
<!-- your long content here... -->
</div>
<div class="mCSB_scrollTools">
<a class="mCSB_buttonLeft"></a>
<div class="mCSB_draggerContainer">
<div class="mCSB_dragger ui-draggable">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
<a class="mCSB_buttonRight"></a>
</div>
</div>
</div>
知道這些之後,我們就可以來定義滾動條樣式了,對于同一頁面多個滾動條,官方推薦如下的寫法:
//每個容器都有個ID,如第一個是_mCS_1,如第二個是_mCS_2,如第三個是_mCS_3
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
// 1st scrollbar dragger style...
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
// 2nd scrollbar dragger style...
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
// 3rd scrollbar dragger style...
}
例如:
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; } //小滾動條的背景色
._mCS_1 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: blue; } //小滾動條hover上去的顔色
._mCS_1 #mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; } //小滾動條的寬高
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{width:10px;} //長滾動條的寬高
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail:hover{background:yellow;} //長滾動條hover上去的顔色
._mCS_1 .mCSB_scrollTools .mCSB_buttonUp{background-position:-83px 0;} //小铵鈕圖示背景
._mCS_1 .mCSB_scrollTools .mCSB_buttonDown{background-position:-83px 0;} //小铵鈕圖示背景
._mCS_1 ._mCS_1 .mCSB_inside > .mCSB_container{margin-right:0px;} //内容與滾動條的距離
._mCS_1 .mCSB_scrollTools{right:0px;} //滾動條的位置
轉載于:https://www.cnblogs.com/alantao/p/5239262.html