1.利用方法：

1）先引入jquery插件jquery.mCustomScrollbar样式和它的js以及jquery

<link rel=\公众stylesheet\"大众 href=\"大众css/jquery.mCustomScrollbar.min.css\公众 />

html兼容代码火狐完善解决css滚动条样式IE火狐不兼容问题 Python

<script src=\"大众js/jquery-1.9.1.min.js\"大众></script>

<script src=\"大众js/jquery.mCustomScrollbar.concat.min.js\"大众></script>

2）以盒子box为例加上css滚动条

$(\"大众.box\"大众).mCustomScrollbar();

2.例子代码如下：

<!Doctype html>

<html>

<head>

<meta http-equiv=\"大众Content-Type\"大众 content=\"大众text/html; charset=gb2312\公众/>

<title>css滚动条样式，jquery插件完美办理ie火狐不兼容问题</title>

<link rel=\"大众stylesheet\公众 href=\公众css/jquery.mCustomScrollbar.min.css\公众 />

<style type=\"大众text/css\公众>

.box{

width: 600px;

height: 400px;

margin: 100px auto;

border: 1px solid #000;

border-right: 0;

}

.main{

overflow-x: hidden;

overflow-y: auto;

color: #000;

font-size: 16px;

height: 100%;

}

.main p{height:300px;}

</style>

</head>

<body>

<div class=\"大众box\"大众>

<div class=\公众main\公众>

<p>内容1</p>

<p>内容2</p>

<p>内容3</p>

</div>

</div>

<script src=\"大众js/jquery-1.9.1.min.js\"大众></script>

<script src=\公众js/jquery.mCustomScrollbar.concat.min.js\"大众></script>

<script>

(function($){

$(window).on(\"大众load\公众,function(){

$(\公众.box\"大众).mCustomScrollbar({

//官网的滚动条主题

theme:\"大众3d-thick-dark\"大众

});

});

})(jQuery);

</script>

</body>

</html>

查看效果演示：http://tangjiusheng.com/jQuery/jquery.mCustomScrollbar/

3.例子解释：

1）利用了官网的滚动条主题“3d-thick-dark”

2）可以根据你喜好选择的你的主题，点击查看：官网的滚动条主题

3）这个插件只兼容IE8以上

4.末了：

更多参数设置，可以辞官网理解下，插件jquery.mCustomScrollbar官网地址：

http://manos.malihu.gr/jquery-custom-content-scroller/

原文地址：http://tangjiusheng.com/jQuery/160.html

温馨提示：加下微信【yes2016yes99】将免费分享给你一份web前端开拓资料，一起互换学习前端开拓，一起进步！