滚动条的相关插件（mCustomScrollbar）

一：滚动条插件（mCustomScrollbar）

自定义网页中的滚动条的 jQuery 插件 ： mCustomScrollbar 。

mCustomScrollbar使用了 jquery UI，可以通过灵活的通过CSS定义你的滚动条。同时可以定义垂直的和水平的滚动条，并且 提供了鼠标滚动的支持，滚动的过程中，还可以缓冲滚动使得滚动更加的平滑。可以自动调整滚动条的位置并且可以定义滚动到的位置等。

1. 方法：

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

引入插件包中的jquery.mCustomScrollbar.css 样式表文件。

第二步：加载必须的 JS 文件。

需要加载的文件有如下几个：jQuery、jQueryUI， jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js这四个。

jQuery和 jQuery UI 是必须的， jquery.mousewheel.min.js是用来提供滚动支持的，jquery.mCustomScrollbar.js 则是插件的主文件。

第三步：应用 mCustomScrollbar， 激活这个插件

<script type='text/javascript'>

( function ($){

$(window).load( function (){

$(".content").mCustomScrollbar();

});

})(jQuery);

</script>

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

加上的样式很简单，就是定义一个宽或者高或者宽高都定义，然后再定义一个overflow 值为auto。这样如果内容超出了指定的宽高，就会出现一个滚动条。完成上述的操作之后，带有滚动条的内容块的滚动条，就变成这个插件的默认样式了。

2. 介绍详细的参数：

• set_width:false：设置你内容的宽度值可以是像素或者百分比
• set_height:false：设置你内容的高度值可以是像素或者百分比
• horizontalScroll:Boolean：是否创建一个水平滚动条默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false
• scrollInertia:Integer：滚动的惯性值在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
• scrollEasing:String：滚动动作类型查看 jqueryUI 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 回调函数的时间间隔 毫秒单位

（三） 介绍详细的参数和默认参数：

（四）滚动条样式的改变

下面是水平滚动条的结构：