上次关于css滚动条样式的文章《美化css滚动条样式,就这么简单》,不够完美不兼容IE、火狐浏览器,但今天这篇文章可以完美解决这个问题,用到了jquery插件jquery.mCustomScrollbar,还是挺好用的,样式主题多够我们用了,也可以自定义样式。
1.使用方法:
1)先引入jquery插件jquery.mCustomScrollbar样式和它的js以及jquery
2)以盒子box为例加上css滚动条$(".box").mCustomScrollbar();
2.例子代码如下:html>
css滚动条样式,jquery插件完美解决ie火狐不兼容问题
.box{
width:600px;
height:400px;
margin:100pxauto;
border:1pxsolid#000;
border-right:0;
}
.main{
overflow-x:hidden;
overflow-y:auto;
color:#000;
font-size:16px;
height:100%;
}
.mainp{height:300px;}
内容1
内容2
内容3
(function($){
$(window).on("load",function(){
$(".box").mCustomScrollbar({
//官网的滚动条主题
theme:"3d-thick-dark"
});
});
})(jQuery);
3.例子说明:
1)使用了官网的滚动条主题“3d-thick-dark”
2)可以根据你喜好选择的你的主题,点击查看:官网的滚动条主题
3)这个插件只兼容IE8以上
4.最后:
更多参数设置,可以去官网了解下,插件jquery.mCustomScrollbar官网地址:
爆款服务器
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!