一、关于 mCustomScrollbar
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。总之，你知道非常好用就是了。
二、使用方法
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 则是插件的主文件。
*注：加载顺序也要按照上面代码的顺序，如果不注意加载的顺序，可能会导致失败，原因请看本人的：网页中代码的顺序是不可忽略的细节。
|
1 2 3 4 |
<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 代码没有加载成功，就会引用本地的库，而不会导致插件无法使用。
|
1 2 3 4 |
<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
|
1 2 3 4 5 6 7 |
<script type='text/javascript'> (function($){ $(window).load(function(){ $(".content").mCustomScrollbar(); }); })(jQuery); </script> |
使用差不多到这里就算完成了，如果觉得它的样式不好看(毕竟每个网页的主题都不一样，不一定和你的主题匹配得上)，你可以自己更改，但个人建议不要去改它原来的css文件，而是重新定义，放在它的css文件样式之后以覆盖的方式修改。根据官方给出的下图，相信你一定可以很快的修改出一个很适合你网页的精美滚动条。
三、参数介绍（真正的使用）
mCustomScrollbar 这个插件的功能巨大，所以参数也很多，参数值当然更多。在介绍参数的时候，我想先为新手介绍两种参数值的写法，分别是直接的和合并的。
我们平时接触的插件用的参数，都是直接跟着参数写上参数值，这个比较直观简单。在这个插件中，参数值太多，所以把一些参数合并起来写。例如下面要介绍到的 scrollButtons 这个参数，它又有四个子属性：enable、scrollType、scrollSpeed、scrollAmount，这四个属性也分别有自己的值，来实现相应的功能。如果再加上其他的参数，那么我们应该这样写：
|
1 2 3 4 5 6 7 8 9 |
$("#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 回调函数的时间间隔 毫秒单位
下面为默认值：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(".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 } }); |
最后，也许你所有的滚动条都改变了，而整个网页的滚动条却还是浏览器默认的滚动条，是不是瞬间感觉整个人都不好了。如果你想修改整个网页的滚动条，方法肯定也有，你可以把整个网页包含在一个div当中，把这个div设置成绝对定位，大小设置为屏幕大小，再监听窗口的resize事件，随着它而改变自己的大小，不就实现了吗？perfect，有没有！！！
发表评论