mCustomScrollbar.js自定义滚动条…

女爷i 2022-06-07 04:14 714阅读 0赞

在写网页的过程中，我们经常会遇到自定义滚动条，自定义滚动条与浏览器默认样式有很大差别，而且还不易改，这是我们就需要好用的插件啦！！！

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);

效果如下：

[![mCustomScrollbar.js自定义滚动条总结][mCustomScrollbar.js]][mCustomScrollbar.js_mCustomScrollbar.js]

当然，在jquery.mCustomScrollbar.js中滚动条是垂直显示的，若要垂直显示滚动条，则可用以下代码：

效果如下：

[![mCustomScrollbar.js自定义滚动条总结][mCustomScrollbar.js]][mCustomScrollbar.js_mCustomScrollbar.js 1]

**注：若要改变滚动条样式，则可以根据需要改变jquery.mCustomScrollbar.css**

**mCustomScrollbar 的参数介绍：**

<table style="width:80%"> 
 <tbody> 
 <tr> 
 <td>&nbsp;set_width:false</td> 
 <td>&nbsp;设置内容的宽度 值可以是像素或者百分比</td> 
 </tr> 
 <tr> 
 <td>&nbsp;set_height:false</td> 
 <td>&nbsp;设置内容的高度 值可以是像素或者百分比</td> 
 </tr> 
 <tr> 
 <td>&nbsp;horizontalScroll:Boolean</td> 
 <td>&nbsp;是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false</td> 
 </tr> 
 <tr> 
 <td>&nbsp;scrollInertia:Integer</td> 
 <td>&nbsp;滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)</td> 
 </tr> 
 <tr> 
 <td>&nbsp;scrollEasing:String</td> 
 <td>&nbsp;滚动动作类型 查看&nbsp;<a href="http://view.jqueryui.com/formcontrols/demos/effect/easing.html" rel="nofollow">jquery UI easing</a>&nbsp;可以看到所有的类型</td> 
 </tr> 
 <tr> 
 <td>&nbsp;mouseWhee</td> 
 <td>&nbsp;鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写false取消鼠标滚动功能</td> 
 </tr> 
 <tr> 
 <td>&nbsp;mouseWheelPixels:Integer</td> 
 <td>&nbsp;鼠标滚动中滚动的像素数目 值为以像素为单位的数值</td> 
 </tr> 
 <tr> 
 <td>&nbsp;autoDraggerLength:Boolean</td> 
 <td>&nbsp;根据内容区域自动调整滚动条拖块的长度 值:true,false</td> 
 </tr> 
 <tr> 
 <td>&nbsp;scrollButtons:{ enable:Boolean }</td> 
 <td>&nbsp;是否添加 滚动条两端按钮支持 值:true,false</td> 
 </tr> 
 <tr> 
 <td>&nbsp;scrollButtons:{ scrollType:String }</td> 
 <td>&nbsp;滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动)&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

为了更加直观的看到要定义的滚动条区域，官方给出了一张非常形象的图片：

[![mCustomScrollbar.js自定义滚动条总结][mCustomScrollbar.js]][mCustomScrollbar.js_mCustomScrollbar.js 2]

[mCustomScrollbar.js]: http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif
[mCustomScrollbar.js_mCustomScrollbar.js]: /images/20220607/e6b01941ab504f1fa45e591ec3c7e5c8.png
[mCustomScrollbar.js_mCustomScrollbar.js 1]: /images/20220607/6149bb3448d94c799f7421caa5454e67.png
[mCustomScrollbar.js_mCustomScrollbar.js 2]: /images/20220607/46130671a2754d8ca26e9b4717157c26.png