首先,页面头部引入滚动条插件所需的js和css:
<link href="scroll/jquery.mCustomScrollbar.css" rel="stylesheet"
type="text/css">
<script src="scroll/jquery-2.1.0.min.js"></script>
<script src="scroll/jquery.mCustomScrollbar.concat.min.js"></script>
然后,在你所需滚动条的div上增加一class属性:
<div class="content">
这里是一屏显示不了的相当多的内容
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat...</p>
<p>Aliquam erat volutpat. Sed urna arcu, .........</p>
</div>
页面样式:
<style>
body{margin:0; padding:0; color:#eee; background:#222;
font-family:Verdana,Geneva,sans-serif; font-size:13px;
line-height:20px;}
.content{margin:40px; width:260px; height:500px; padding:20px;
overflow:hidden; background:#333; -webkit-border-radius:3px;
-moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif;
font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
最后,调用mCustomScrollbar:
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
你可以在jquery.mCustomScrollbar.css这个样式文件里更改你所需要的滚动条样式。
效果大概如下图: