用法
HTML
在HTML文檔頭部引入mCustomScrollbar.css
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
</head>
在body的結束標簽之前引入插件所需js文件
<script src="/path/to/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
CSS
需要創建滾動條的元素必須具有明確的CSS屬性使元素形成包裹的塊級元素：
- 具有高度值（height）
- 最大高度值（max-height）
- 具有overflow屬性值為auto或者hidden
- 元素的內容具有足夠的高度（或寬度，針對橫向滾動條）
初始化
通過JavaScript初始化
把相關的文件加載進頁面之后，call mCustomScrollbar function on the element selector you want to add the scrollbar(s)
<script>
(function($){
$(window).on("load",function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
通過HTML初始化
在你需要創建自定義滾動條的元素的標簽里添加默認的class="mCustomScrollbar"類，同時你可以根據需要的設置它的 axis 通過 HTML 的 data-msc-axis 屬性， 例如屬性值為"x" 代表水平滾動條，屬性值為 "y"代表垂直滾動條。或者設置它的主題通過HTML的 data-msc-theme屬性。
舉個例子~
<div class="mCustomScrollbar" data-mcs-theme="dark">
<!-- your content -->
</div>
基礎設置和可選參數
axis
插件默認情況下會生成垂直方向的滾動條。如果要創建水平或水平垂直兩個方向的滾動條的話，可以在mCustomScrollbar的函數里將axis的選項設置為"x"或"yx"，例如
$(".content").mCustomScrollbar({
axis:"x" // horizontal scrollbar
});
$(".content").mCustomScrollbar({
axis:"yx" // vertical and horizontal scrollbar
});
theme
要快速改變滾動條的外觀，可以設置 theme 選項的參數為任何一種已經在 jquery.mCustomScrollbar.css 中定義好的主題，例如
$(".content").mCustomScrollbar({
theme:"dark"
});
基本的插件使用就介紹到這里，接下來我將針對插件的部分設置進行介紹
配置
你可以通過下面的可選參數來配置你創建的滾動條（只介紹項目中實際使用到的）
用法 $(selector).mCustomScrollbar({ option: value });
- scrollInertia: integer： 設置滾動條的滾動動量，它將會作為滾動動畫的持續時間（以毫秒計算），越高的數值會讓滾動條滾動得更加平滑，將它的值設置為0可以禁止滾動動畫
- autoHideScrollbar: boolean： 設置是否自動隱藏滾動條
- alwaysShowScrollbar: integer： 設置是否一直顯示滾動條
- mouseWheel:{ preventDefault:true }： 阻止滾動條滾動到頂部或者底部時自動帶動父級元素的滾動條往上滾動的表現（這和瀏覽器自身的滾動條的表現是一致的）
插件的方法
通過以下的方法你可以利用你的腳本代碼執行插件的各種變化
update
用法 $(selector).mCustomScrollbar("update");
調用插件的 update方法來手動讓存在的滾動條來更新適應新的內容或者重新設置元素的大小。當元素自身的的內容或滾動條尺寸變化時，這個方法默認是由插件（的updateOnContentResize選項來）自動調用的。
scrollTo
用法 $(selector).mCustomScrollbar("scrollTo",position,options);
調用scrollTo方法來將內容滾動到設定好的位置參數
position parameter（位置參數）
位置參數可以是：
"string"
- e.g. element selector: "#element-id"
- e.g. special pre-defined position: "bottom"
- e.g. number of pixels less/more: "-=100"/"+=100"
integer
- e.g. number of pixels: 100
[array] - e.g. different y/x position: [100,50]
object/function
- e.g. jQuery object: $("#element-id")
- e.g. js object: document.getelementbyid("element-id")
- e.g. function: function(){ return 100; }
Pre-defined position strings:
- "bottom" – scroll to bottom
- "top" – scroll to top
- "right" – scroll to right
- "left" – scroll to left
- "first" – scroll to the position of the first element within content
- "last" – scroll to the position of the last element within content
Method options（方法選項）
scrollInertia: integer
Scroll-to事件的持續時間（毫秒計）
例子：
$(selector).mCustomScrollbar("scrollTo","bottom",{
scrollInertia:3000
});
scrollEasing: "string"
Scroll-to時間的動畫過渡效果,可以是: "linear", "easeOut", "easeInOut".
例子：
$(selector).mCustomScrollbar("scrollTo","bottom",{
scrollEasing:"easeOut"
});
moveDragger: boolean
Scroll scrollbar dragger (instead of content).
例子：
$(selector).mCustomScrollbar("scrollTo",80,{
moveDragger:true
});
timeout: integer
為方法設定計時器(默認的計時器是60ms以便配合和滾動條的自動更新事件)
例子：
$(selector).mCustomScrollbar("scrollTo","top",{
timeout:1000
});
callbacks: boolean
Trigger user defined callbacks after scroll-to completes.
例子：
$(selector).mCustomScrollbar("scrollTo","left",{
callbacks:false
});
stop
用法 $(selector).mCustomScrollbar("stop");
停止當前任何正在運行的滾動事件 (當你希望阻止之前的 scrollTo 方法的調用時很有用).
disable
用法 $(selector).mCustomScrollbar("disable");
調用 disable 方法將會暫時的禁用滾動條
被禁用掉的滾動條可以通過重新調用 update 方法來啟用
為了禁止滾動條并且重置它的內容所處的位置，設置它的方法的 reset 參數為 true
$(selector).mCustomScrollbar("disable",true);
destroy
用法 $(selector).mCustomScrollbar("destroy");
Calling destroy method will completely remove the custom scrollbar and return the element to its original state (demo).
滾動條樣式和主題
作為一款可以高度自定義的滾動條插件，自己定義滾動條樣式和主題當然是必不可少的功能
你可以通過純 CSS 設計并且可視化的自定義你的滾動條，也可以使用 jquery.mCustomScrollbar.css 中具有的默認和基礎樣式以及所有的滾動條主題
最便捷的方式是選擇一個已經定義好的滾動條主題，舉個例子：
$(selector).mCustomScrollbar({
theme:"dark"
});
詳細的自定義方法可參考官方文檔
以上為筆者薄力選譯，如有疏忽翻譯錯漏之處，還請讀者指正。
