在写网页的过程中,我们经常会遇到自定义滚动条,自定义滚动条与浏览器默认样式有很大差别,而且还不易改,这是我们就需要好用的插件啦!!!
为了更加直观的看到要定义的滚动条区域,官方给出了一张非常形象的图片:
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);
效果如下:
当然,在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);
}); }); })(jQuery);
效果如下:
注:若要改变滚动条样式,则可以根据需要改变jquery.mCustomScrollbar.css
mCustomScrollbar 的参数介绍:
set_width:false | 设置内容的宽度 值可以是像素或者百分比 |
set_height:false | 设置内容的高度 值可以是像素或者百分比 |
horizontalScroll:Boolean | 是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false |
scrollInertia:Integer | 滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑) |
scrollEasing:String | 滚动动作类型 查看 jquery UI easing 可以看到所有的类型 |
mouseWhee | 鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写false取消鼠标滚动功能 |
mouseWheelPixels:Integer | 鼠标滚动中滚动的像素数目 值为以像素为单位的数值 |
autoDraggerLength:Boolean | 根据内容区域自动调整滚动条拖块的长度 值:true,false |
scrollButtons:{ enable:Boolean } | 是否添加 滚动条两端按钮支持 值:true,false |
scrollButtons:{ scrollType:String } | 滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) |
为了更加直观的看到要定义的滚动条区域,官方给出了一张非常形象的图片: