mCustomScrollbar.js自定义滚动条… 女爷i 2022-06-07 04:14 659阅读 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中滚动条是垂直显示的,若要垂直显示滚动条,则可用以下代码: (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); 效果如下: [![mCustomScrollbar.js自定义滚动条总结][mCustomScrollbar.js]][mCustomScrollbar.js_mCustomScrollbar.js 1] **注:若要改变滚动条样式,则可以根据需要改变jquery.mCustomScrollbar.css** **mCustomScrollbar 的参数介绍:** <table style="width:80%"> <tbody> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">set_width:false</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">设置内容的宽度 值可以是像素或者百分比</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">set_height:false</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">设置内容的高度 值可以是像素或者百分比</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">horizontalScroll:Boolean</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">scrollInertia:Integer</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">scrollEasing:String</span></font></td> <td><font style="font-size: 14px;"> <span style="white-space: pre-wrap; text-align: justify; color: rgb(51, 51, 51);">滚动动作类型 查看 </span><a href="http://view.jqueryui.com/formcontrols/demos/effect/easing.html" rel="nofollow"><span style="color: rgb(62, 141, 214);">jquery UI easing</span></a><span style="white-space: pre-wrap; text-align: justify; color: rgb(51, 51, 51);"> 可以看到所有的类型</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">mouseWhee</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写false取消鼠标滚动功能</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">mouseWheelPixels:Integer</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">鼠标滚动中滚动的像素数目 值为以像素为单位的数值</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">autoDraggerLength:Boolean</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">根据内容区域自动调整滚动条拖块的长度 值:true,false</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">scrollButtons:{ enable:Boolean }</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">是否添加 滚动条两端按钮支持 值:true,false</span></font></td> </tr> <tr> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); font-weight: bold; white-space: pre-wrap; text-align: justify;">scrollButtons:{ scrollType:String }</span></font></td> <td><font style="font-size: 14px;"> <span style="color: rgb(51, 51, 51); white-space: pre-wrap; text-align: justify;">滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) </span></font></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
还没有评论,来说两句吧...