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這個樣式文件裏更改你所需要的滾動條樣式。 

效果大概如下圖：