有時需要對div加滾動條，并且需要一定的樣式，如果采用CSS的方法兼容性總是出各種問題，比如在firefox瀏覽器上就很難做到完美兼容，當然firefox目前的使用率不是很高，大概不足10%，也可以不考慮采用CSS的方法，代碼簡單！

而采用插件的方法，比如jQuery custom content scroller滾動條插件，好處就是兼容性良好，并且有很多樣式主題可以選擇，但缺點就是過大，JS+CSS一起接近100k，如果是普通小站并且帶寬很低的站，對于加載的速度有一定影響。

今天在寫一個zblog主題ydblack的時候，快訊模塊要加入滾動條，CSS的方法除了firefox其它都正常，最終還是選擇了使用jQuery custom content scroller插件，就是因為兼容性，作為模板對于兼容性的要求較高。

首先加載js+css

<link href="{$host}zb_users/theme/{$theme}/style/css/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<script src="{$host}zb_users/theme/{$theme}/script/jquery.mCustomScrollbar.concat.min.js" type="text/javascript"></script>
<script>
    (function($){
        $(window).on("load",function(){
            $(".Scrollbar").mCustomScrollbar({
             theme:"minimal-dark", //選了minimal-dark樣式
             scrollInertia: 0, //滾動不加入任何動畫時間
//更多配置信息 http://manos.malihu.gr/jquery-custom-content-scroller/
             });
        });
    })(jQuery);
</script>

配置可以官網查看：http://manos.malihu.gr/jquery-custom-content-scroller/