在寫網頁的過程中，我們經常會遇到自定義滾動條，自定義滾動條與瀏覽器默認樣式有很大差別，而且還不易改，這是我們就需要好用的插件啦！！！
![mCustomScrollbar.js自定義滾動條總結]( "mCustomScrollbar.js自定義滾動條總結")
![mCustomScrollbar.js自定義滾動條總結]( "mCustomScrollbar.js自定義滾動條總結")
爲了更加直觀的看到要定義的滾動條區域，官方給出了一張非常形象的圖片：
![mCustomScrollbar.js自定義滾動條總結]( "mCustomScrollbar.js自定義滾動條總結")
mCustomScrollbar 是個基於 jQuery UI
的自定義滾動條插件，它可以讓你靈活的通過 CSS 定義 網
頁的滾動條，並且垂直和水平兩個方向的滾動條都可以定義。並且在滾動的過程中，還可以緩衝滾動使得滾動更加的平滑，還可以自動調整滾動條的位置和定義滾動到的位置等。
第一步：加載
mCustomScrollbar 的文件
1.jQuery.mcustomScrollbar.css
2.jQuery
3.jQuery UI
4.jQuery.mousewheel.min.js
5.jQuery.mcustomScrollbar.js
第二步：應用
mCustomScrollbar。
當文件加載完成後，須激活mCustomScrollbar插件，代碼如下：
(function($){
$(document).ready(function(){
$(".content").mCustomScrollbar();
//.content須應用mCustomScrollbar的元素類名
，.content中的內容要超過元素高度，並溢出隱藏，否則無法顯示出效果 }); })(jQuery);
效果如下：
當然，在jquery.mCustomScrollbar.js中滾動條是垂直顯示的，若要垂直顯示滾動條，則可用以下代碼：
(function($){ $(window).load(function(){
$.mCustomScrollbar.defaults.theme="light-2"; //set "light-2" as the
default theme //$(".content").mCustomScrollbar();
$(".content").mCustomScrollbar({
axis:"x", advanced:{autoExpandHorizontalScroll:true}
//是否創建一個水平滾動條 默認是垂直滾動條 值可爲:true(創建水平滾動條) 或
false
}); }); })(jQuery);
}); }); })(jQuery);
效果如下：
注：若要改變滾動條樣式，則可以根據需要改變jquery.mCustomScrollbar.css
mCustomScrollbar 的參數介紹：
| set_width:false | 設置內容的寬度 值可以是像素或者百分比 |
| set_height:false | 設置內容的高度 值可以是像素或者百分比 |
| horizontalScroll:Boolean | 是否創建一個水平滾動條 默認是垂直滾動條 值可爲:true(創建水平滾動條) 或 false |
| scrollInertia:Integer | 滾動的慣性值 在毫秒中 使用0可以無滾動慣性 (滾動慣性可以使區塊滾動更加平滑) |
| scrollEasing:String | 滾動動作類型 查看 jquery UI easing 可以看到所有的類型 |
| mouseWhee | 鼠標滾動的支持 值爲:true.false,像素 默認的情況下 鼠標滾動設置成像素值 填寫false取消鼠標滾動功能 |
| mouseWheelPixels:Integer | 鼠標滾動中滾動的像素數目 值爲以像素爲單位的數值 |
| autoDraggerLength:Boolean | 根據內容區域自動調整滾動條拖塊的長度 值:true,false |
| scrollButtons:{ enable:Boolean } | 是否添加 滾動條兩端按鈕支持 值:true,false |
| scrollButtons:{ scrollType:String } | 滾動按鈕滾動類型 值:”continuous”(當你點擊滾動控制按鈕時斷斷續續滾動) “pixels”(根據每次點擊的像素數來滾動) |
爲了更加直觀的看到要定義的滾動條區域，官方給出了一張非常形象的圖片：