自定义滚动条插件

点击这里查看官方地址，

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。

第一步：加载插件的样式文件。

<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 目录里面。

三步：对内容块激活这个插件

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

第四步：在页面中添加内容和样式

<div class="content">
    <p>测试数据.......还有很多很多</p>
</div>

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

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 你可以根据内容的动态变化自动调整大小可以看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 方法

用法：$(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 方法可以移除某个对象的自定义滚动条并且恢复默认样式

可以看一些使用 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 让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。

关于更多的进阶使用和技巧，欢迎跟我交流，也可以关注本文，会在后面陆续添加。