自訂捲軸mCustomScrollbar

標籤：

mCustomScrollbar 是個基於 jQuery UI 的自訂捲軸外掛程式，它可以讓你靈活的通過 CSS 定義網頁的捲軸，並且垂直和水平兩個方向的捲軸都可以定義，它通過 Brandon Aaron jquery mouse-wheel plugin 提供了滑鼠滾動的支援，並且在滾動的過程中，還可以緩衝滾動使得滾動更加的平滑，還可以自動調整捲軸的位置和定義滾動到的位置等。

 

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" 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,falsealwaysShowScrollbar:Integer                     //保持捲軸的顯示，取值0,1(保持滾動塊可見),2(保持捲軸所有的顯示)mouseWheel:{     enable: boolean                             //啟用或禁用通過滑鼠滾輪滾動內容。    scrollAmount: Integer                       //滾輪滾動的像素    invert: boolean                             //反轉滾動方向}         scrollButtons:{ enable:Boolean }                //是否添加 捲軸兩端按鈕支援 值:true,falsescrollButtons:{ 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 你可以根據內容的動態變化自動調整大小 可以看Demoadvanced:{ autoScrollOnFocus:Boolean }          //是否自動滾動到聚焦中的對象 例如表單使用類似TAB鍵那樣跳轉焦點 值:true falsecallbacks:{ onScrollStart:function(){} }        //使用自訂的回呼函數在滾動時間開始的時候執行 具體請看Democallbacks:{ 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{  }           //小捲軸的背景色._mCS_1 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{  }    //小捲軸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;}                                       　　　　　　　　　　 //捲軸的位置

自訂捲軸mCustomScrollbar