滾動條插件mCustomScrollbar

系統默認的滾動條樣式，真的已經看的夠噁心了。試想一下，若是在一個頗有特點和創意的網頁中，出現了一根系統中默認的滾動條樣式，會有多麼的彆扭。 爲了本身定義網頁中的滾動條的方法，我真的已經找了好久了，就目前尋找的成果來講，找到了兩個比較不錯的 jQuery 插件：jScrollPane 和 mCustomScrollbar 。關於前者，你們見過的可能比較多，可是這個插件太過於古老並且功能不強大。效果在幾年前很是不錯，可是放在如今就很差說了。因此我選擇了後者： mCustomScrollbar。下圖是二者官方示例的簡單對比：

 

本文就是介紹如何使用這個插件，大部分的內容，是根據mCustomScrollbar 官方的介紹頁面進行一個翻譯，但將其部份內容修改，同時增長一些本身在使用中的一些技巧。

關於 mCustomScrollbar

mCustomScrollbar 使用了 jQuery UI，能夠經過靈活的經過 CSS 定義你的滾動條。同時能夠定義垂直的和水平的滾動條，而且經過 Brandon Aaron jquery mouse-wheel plugin 提供了鼠標滾動的支持，滾動的過程當中，還能夠緩衝滾動使得滾動更加的平滑。能夠自動調整滾動條的位置而且能夠定義滾動到的位置等。總之，你知道很是好用就行了。

 

如何使用 mCustomScrollbar

首先，先請你下載做者提供的插件包，裏面包含了全部的插件文件和一些例子。如下的四個文件時必需要上傳到你的服務器上的：jquery.mCustomScrollbar.js, jquery.mousewheel.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png。

第一步：加載插件的樣式文件。

可使用如下代碼，引入插件包中的 jquery.mCustomScrollbar.css 樣式表文件。

<link href="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="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>

你能夠把這段代碼放在文檔的底部來縮短加載網頁內容的時間，緣由也能夠在上面介紹的那篇文章中看到。這裏的加載的代碼使用了 Google 的 CDN 加速服務來得到 jQuery 和 jQuery UI，這樣的有好處也有壞處。在插件包中，包含了 jQuery 和 jQuery UI（這個 UI 被做者精簡了，包含這個插件必須的模塊，大小隻有 43KB），你固然能夠把插件包中的這兩個庫上傳到服務器上使用。它們在插件包的 jquery 目錄裏面。

若是當你在使用相似 Google 或者 Sina 的經常使用 Javascript 庫的加速服務的話，更推薦採用下面的寫法（以 Google 爲例）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script>

若是這樣寫，它會在 庫 加載完成以後，作一個判斷：若是沒有成功加載這個庫，那麼就生成一段新的 Javascript 引用代碼，用來引用本地的文件。這樣，若是外面的庫沒法使用，就會加載本地的庫，而不會致使插件沒法使用。推薦這種寫法。

第三步：對 內容塊 激活這個插件

<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

這裏我使用了(function($){ … })(jQuery)；來包裹 jQuery 代碼，這是爲了不 jQuery 和其餘的 庫 在使用中產生衝突。我還用了window load ($(window).load()) 來激活個人插件功能，由於這樣，就能夠保證在頁面對象所有加載完成以後，加載個人插件。固然，你也可使用常規的 jQuery 代碼加載方法，可是你要明白 ready 和 load 方法之間的不一樣。通常的 jQuery 代碼加載方法以下：

<script>
    (function($){
        $(document).ready(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

第四步：在頁面中添加內容和樣式

沒有內容固然談不上出現這個插件的效果了。就上述示例代碼來講，咱們應該在頁面中定義一個 class 爲 content 的 內容塊。並添加一些測試數據：

<div class=".content">
    <p>測試數據.......還有不少不少</p>
</div>

這樣固然不算完，自定義滾動條的樣式，必需要出現滾動條才能夠。因此咱們還要對這個塊加上一些 CSS 來讓它出現滾動條，不然是沒有效果的。加上的樣式很簡單，就是定義一個寬或者高或者寬高都定義，而後再定義一個 overflow 值爲 auto。這樣若是內容超出了指定的寬高，就會出現一個滾動條。例：

width:100px;height:100px;overflow:auto;

完成上述的操做以後，帶有滾動條的內容塊的滾動條，就變成這個插件的默認樣式了。

 

官方的默認樣式相對於白色的對比度不高，因此爲了顯示的明顯一點，我加了一個深色的背景色。

固然還有不少參數開擴展插件的功能，這些參數的使用方法事後再講。先來講說上面用到的這些文件的用途和簡單介紹：

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 ），你能夠根據本身的需求自定義。

完成這些，你已經能夠正確的使用這個插件，而且看到了相應的效果。可是沒有人願意使用如此強大的插件來實現這個默認的效果，下面來講一下進階的使用。

mCustomScrollbar 的參數介紹

這個插件的功能巨大，因此參數也不少，參數值固然更多。在介紹參數的時候，我想先爲新手介紹兩種參數值的寫法，分別是直接的和合並的。

我 們平時接觸的插件用的參數，都是直接跟着參數寫上參數值，這個比較直觀簡單。在這個插件中，參數值太多，因此把一些參數合併起來寫。例以下面要介紹到的 scrollButtons 這個參數，它下面有四個屬性：enable、scrollType、scrollSpeed、scrollAmount，這四個屬性也分別有本身的值，來 實現相應的功能。若是再加上其餘的參數，那麼咱們應該這樣寫：

$("#main").mCustomScrollbar({
 scrollButtons:{
 enable:false,
 scrollType:"continuous",
 scrollSpeed:20,
 scrollAmount:40
 },
 horizontalScroll:false,
 });

必定要注意閉合的括號和語句之間的逗號，新手可能會由於不當心，沒有嚴格的按照這個規則寫致使插件沒法運行。好，下面咱們介紹詳細的參數。

• set_width:false | 設置你內容的寬度 值能夠是像素或者百分比
• set_height:false | 設置你內容的高度 值能夠是像素或者百分比
• horizontalScroll:Boolean | 是否建立一個水平滾動條 默認是垂直滾動條 值可爲:true(建立水平滾動條) 或 false
• scrollInertia:Integer | 滾動的慣性值 在毫秒中 使用0能夠無滾動慣性 (滾動慣性可使區塊滾動更加平滑)
• scrollEasing:String | 滾動動做類型 查看 jquery UI easing 能夠看到全部的類型
• mouseWheel:String/Boolean | 鼠標滾動的支持 值爲:true.false,像素 默認的狀況下 鼠標滾動設置成像素值 填寫false取消鼠標滾動功能
• mouseWheelPixels:Integer | 鼠標滾動中滾動的像素數目 值爲以像素爲單位的數值
• autoDraggerLength:Boolean | 根據內容區域自動調整滾動條拖塊的長度 值:true,false
• 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 你能夠根據內容的動態變化自動調整大小
  
• advanced:{   autoScrollOnFocus:Boolean   } | 是否自動滾動到聚焦中的對象 例如表單使用相似TAB鍵那樣跳轉焦點 值:true false
• callbacks:{   onScrollStart:function(){}   } | 使用自定義的回調函數在滾動時間開始的時候執行
• callbacks:{   onScroll:function(){}   } | 自定義回調函數在滾動中執行 Demo 同上
• callbacks:{   onTotalScroll:function(){}  } | 當滾動到底部的時候調用這個自定義回調函數 Demo 同上
• callbacks:{   onTotalScrollBack:function(){}   } | 當滾動到頂部的時候調用這個自定義回調函數 Demo 同上
• callbacks:{   onTotalScrollOffset:Integer   } | 設置到達頂部或者底部的偏移量 像素單位
• callbacks:{  whileScrolling:function(){}  } | 當用戶正在滾動的時候執行這個自定義回調函數
• callbacks:{  whileScrollingInterval:Integer  } | 設置調用 whileScrolling 回調函數的時間間隔 毫秒單位

下面是全部參數的列表和它們的默認值

$(".content").mCustomScrollbar({
  set_width:false,
  set_height:false,
  horizontalScroll:false,
  scrollInertia:550,
  scrollEasing:"easeOutCirc",
  mouseWheel:"auto",
  autoDraggerLength: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
  }

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);

destroy

用法：$(selector).mCustomScrollbar(「destroy」);

調用 destroy 方法能夠移除某個對象的自定義滾動條而且恢復默認樣式

mCustomScrollbar 的原理

經過潛行者m對這些插件的使用，對這些插件的實現原理也作了一些分析。原理就是這樣的：

首先獲取要修改滾動條樣式的內容區塊，而後使用 CSS 隱藏掉默認滾動條，而後使用 Javascript 添加不少 HTML 結構，再配合 CSS 作出一個滾動條的效果。而後再使用 CSS 定義滾動條的樣式，使用 Javascript 相應鼠標的滾動事件，產生滾動下滑的效果。

明白了這點，下面咱們就能夠看一下滾動條的結構，而後使用 CSS 對其進行定義了。

定義滾動條外觀

先了解一下滾動條的 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="content mCustomScrollbar _mCS_1">
  <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>

知道這些以後，咱們就能夠來定義滾動條樣式了，對於同一頁面多個滾動條，官方推薦以下的寫法：

._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... */
}

爲了更加直觀的看到要定義的滾動條區域，官方給出了一張很是形象的圖片

根據這張圖片，就能夠很容易的定義滾動條的樣式了。

更加進階的使用

修改瀏覽器的滾動條

單單是修改某個內容區域的邊欄已經沒法知足咱們的需求了，咱們還想修改瀏覽器邊欄應該怎麼辦？這固然是沒法用 Javascript 來實現，由於瀏覽器是一個容器，Javascript 是容器裏面的代碼，怎麼會把容器修改了呢？固然，有問題就確定有解決方法。面對這個問題，解決方法很簡單，就是虛擬出來一個瀏覽器窗口。

咱們先添加一個 div 塊，而後對這個 div 添加 position：absolute 屬性，而後就能夠指定它的 width 和 height 爲 100% 或者稍微小點的 98%。這樣，這個 div 就擴充到了整個瀏覽器界面，這樣就能夠被當作是一個網頁的 body。而後加上 overflow：auto 讓其超出自動出現滾動條。這樣就能夠模擬出修改了瀏覽器滾動條的效果。