jQuery 自定義網頁滾動條樣式外掛 mCustomScrollbar 的介紹和使用方法

阿新 • • 發佈：2018-12-25

系統預設的滾動條樣式，真的已經看的夠噁心了。試想一下，如果在一個很有特色和創意的網頁中，出現了一根系統中預設的滾動條樣式，會有多麼的彆扭。為了自己定義網頁中的滾動條的方法，我真的已經找了很久了，就目前尋找的成果來說，找到了兩個比較不錯的 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 mCSBbuttons.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 則是外掛的主檔案。要注意的是，載入順序也要按照上面說的來，如果不注意載入的順序，可能會導致失敗，原因請看本人的：[網頁中程式碼的順序是不可忽略的細節](http://www.qianxingzhem.com/post-1539.html)。你可以使用如下程式碼載入：

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

完成上述的操作之後，帶有滾動條的內容塊的滾動條，就變成這個外掛的預設樣式了。 [![使用 mCustomScrollbar 之後的效果圖](http://qxzm-img.b0.upaiyun.com/blog/2012/12/1602/scroll2.png "scroll")](http://qxzm-img.b0.upaiyun.com/blog/2012/12/1602/scroll2.png) 官方的預設樣式相對於白色的對比度不高，所以為了顯示的明顯一點，我加了一個深色的背景色。當然還有很多引數開擴充套件外掛的功能，這些引數的使用方法過後再講。先來說說上面用到的這些檔案的用途和簡單介紹： **jQuery**：這個外掛的必備庫，你懂。 **jQuery UI**：擴充套件 jQuery 庫並且為我們的滾動條提供了簡單的動畫和拖動功能。 **jquery.mousewheel.min.js**：這是 [Brandon Aaron](http://brandonaaron.net) 編寫的一個偉大的只有2kb的外掛，它面向所有的作業系統和瀏覽器，為我們提供了滑鼠滾動事件的支援。 **jquery.mCustomScrollbar.js**：這是我們的外掛主檔案。在外掛包的 minified 你可以找到它的壓縮版。 **jquery.mCustomScrollbar.css**：這個 CSS 檔案是讓我們來定義邊欄用的。你可以在這個檔案中定義你的邊欄，當然你可以在其他的 CSS 檔案中定義，要注意的是，你要用 CSS 中的順序，其中的優先順序關係來覆蓋這個檔案中的定義。否則可能會無效，關於網頁中程式碼順序，詳情可以看一下 [潛行者m](http://www.qianxingzhem.com) 的這篇文章：[網頁中程式碼的順序是不可忽略的細節](http://www.qianxingzhem.com/post-1539.html)。 **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](http://view.jqueryui.com/formcontrols/demos/effect/easing.html) 可以看到所有的型別 * **mouseWheel:String/Boolean** | 滑鼠滾動的支援值為:true.false,畫素預設的情況下滑鼠滾動設定成畫素值填寫false取消滑鼠滾動功能 * **mouseWheelPixels:Integer** | 滑鼠滾動中滾動的畫素數目值為以畫素為單位的數值 * **autoDraggerLength:Boolean** | 根據內容區域自動調整滾動條拖塊的長度值:true,false * **scrollButtons:{ enable:Boolean }** | 是否新增滾動條兩端按鈕支援值:true,false * **scrollButtons:{ scrollType:String }** | 滾動按鈕滾動型別值:"continuous"(當你點選滾動控制按鈕時斷斷續續滾動) "pixels"(根據每次點選的畫素數來滾動) [點選這裡可以看到形象的例子](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/scroll_buttons_and_snap_scrolling_examples.html) * **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](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html) * **advanced:{ autoScrollOnFocus:Boolean }** | 是否自動滾動到聚焦中的物件例如表單使用類似TAB鍵那樣跳轉焦點值:true false * **callbacks:{ onScrollStart:function(){} }** | 使用自定義的回撥函式在滾動時間開始的時候執行 [具體請看Demo](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/callbacks_example.html) * **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);

可以看一些使用 disable 的例子

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 讓其超出自動出現滾動條。這樣就可以模擬出修改了瀏覽器滾動條的效果。

關於更多的進階使用和技巧，歡迎跟我交流，也可以關注本文，會在後面陸續新增。

jQuery 自定義網頁滾動條樣式外掛 mCustomScrollbar 的介紹和使用方法

關於 mCustomScrollbar

如何使用 mCustomScrollbar

mCustomScrollbar 的方法

update

scrollTo

disable

destroy

mCustomScrollbar 的原理

定義滾動條外觀

更加進階的使用

修改瀏覽器的滾動條

jQuery 自定義網頁滾動條樣式外掛 mCustomScrollbar 的介紹和使用方法

WPF 自定義ProgressBar滾動條樣式

純css3自定義網頁滾動條，瀏覽器統一scroll滾動條

[分享] 通過修改CSS自定義chrome滾動條樣式

CSS3自定義瀏覽器滾動條樣式

JavaScript自定義瀏覽器滾動條相容IE、火狐和chrome

如何自定義CSS滾動條的樣式？

自定義瀏覽器滾動條的樣式，打造屬於你的滾動條風格

自定義瀏覽器滾動條的樣式，打造屬於你的滾動條風格——相容IE和webkit(ff不支援)

自定義瀏覽器滾動條的樣式

純CSS自定義瀏覽器滾動條

Android 自定義橫向滾動條聯動進階版

自定義WPF滾動條(ScrollViewer)：仿蘋果系統規劃

CSS3自定義滾動條樣式 -webkit-scrollbar

CSS3自定義滾動條樣式之 -webkit-scrollbar

css自定義滾動條樣式，自定義文字選擇樣式，設置文字不被選擇

自定義滾動條樣式-transition無效

自定義滾動條樣式相容所有瀏覽器

android listview gridview等自定義滾動條樣式(非反射)

HTML：滾動條樣式自定義（IE/FireFox/webkit）

jQuery 自定義網頁滾動條樣式外掛 mCustomScrollbar 的介紹和使用方法

關於 mCustomScrollbar

如何使用 mCustomScrollbar

mCustomScrollbar 的方法

update

scrollTo

disable

destroy

mCustomScrollbar 的原理

定義滾動條外觀

更加進階的使用

修改瀏覽器的滾動條

相關推薦