如果你構建一個很有特色和創意的網頁，那么肯定希望定義網頁中的滾動條樣式，這方面的 jQuery 插件比較不錯的，有兩個：jScrollPane 和 mCustomScrollbar。
關於 jScrollPane，大家見過的可能比較多，但是這個插件太過於古老而且功能不強大，效果在幾年前非常不錯，但是放在現在就不好說了。所以我選擇了后者：mCustomScrollbar。下圖是兩者官方示例的簡單對比：
本文就是介紹如何使用 mCustomScrollbar 這個插件，大部分的內容是翻譯自 mCustomScrollbar 官方的介紹頁面，但是根據自己的理解做了部分的調整和修改，同時增加一些自己在使用中的一些技巧。
關於 mCustomScrollbar
mCustomScrollbar 是個基於 jQuery UI 的自定義滾動條插件，它可以讓你靈活的通過 CSS 定義網頁的滾動條，並且垂直和水平兩個方向的滾動條都可以定義，它通過 Brandon Aaron jquery mouse-wheel plugin 提供了鼠標滾動的支持，並且在滾動的過程中，還可以緩沖滾動使得滾動更加的平滑，還可以自動調整滾動條的位置和定義滾動到的位置等。總之，你知道非常好用就是了，:-)
如何使用 mCustomScrollbar
mCustomScrollbar 這個插件的下載包里面包含了所有的插件文件和一些例子。其中以下的四個文件時必須要上傳到服務器上：
- jquery.mCustomScrollbar.js
- jquery.mousewheel.min.js
- jquery.mCustomScrollbar.css
- mCSB_buttons.png
第一步：加載 mCustomScrollbar 的樣式文件。
通過下面的代碼，引入插件包中的 jquery.mCustomScrollbar.css 樣式表文件。
1 <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 UI 這個插件被作者精簡了，只包含這個插件必須的模塊，大小也只有 43KB。
如果當你在使用類似 Google 或者 Sina 的常用 Javascript 庫的加速服務的話，更推薦采用下面的這種 fallback 的寫法，如果 CDN 的 JavaScript 代碼沒有加載成功，就會引用本地的庫，而不會導致插件無法使用：
<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>
第三步：應用 mCustomScrollbar
<script type='text/javascript'> (function($){ $(window).load(function(){ $(".content").mCustomScrollbar(); }); })(jQuery); </script>
這里我使用了(function($){ … })(jQuery)；來包裹 jQuery 代碼，這是為了避免沖突。我還用了window load ($(window).load()) 來激活我的插件功能，因為這樣，就可以保證在頁面對象全部加載完成之后，加載我的插件。當然，你也可以使用常規的 jQuery 代碼加載方法，但是你要明白 ready 和 load 方法之間的不同。一般的 jQuery 代碼加載方法如下：
<script type='text/javascript'> (function($){ $(document).ready(function(){ $(".content").mCustomScrollbar(); }); })(jQuery); </script>
第四步：在頁面中添加內容和 mCustomScrollbar 的樣式
沒有內容當然談不上出現這個插件的效果了。就上述示例代碼來說，我們應該在頁面中定義一個 class 為 content 的 內容塊。並添加一些測試數據：
<div> <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 中的順序，其中的優先級關系來覆蓋這個文件中的定義。否則可能會無效，關於網頁中代碼順序，詳情可以看一下 潛行者m 的這篇文章：網頁中代碼的順序是不可忽略的細節。
- mCSB_buttons.png： 這個 png 圖片文件，包含了向上向下向左向右滾動的按鈕。可以使用 CSS sprites 技術，來使用這個圖片中的相應按鈕。插件包中包含了這個圖片的 PSD 源文件（sources/mCSB_buttons.psd ），你可以根據自己的需求自定義。
完成這些，你已經可以正確的使用這個插件，並且看到了相應的效果。但是沒有人願意使用如此強大的插件來實現這個默認的效果，下面來說一下進階的使用。
mCustomScrollbar 的參數介紹
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 你可以根據內容的動態變化自動調整大小 可以看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 回調函數的時間間隔 毫秒單位
下面是所有參數的列表和它們的默認值
$(".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="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 讓其超出自動出現滾動條。這樣就可以模擬出修改了瀏覽器滾動條的效果。