jquery滚动条插件mCustomScrollbar使用

首先，页面头部引入滚动条插件所需的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这个样式文件里更改你所需要的滚动条样式。 

效果大概如下图：