好用的jQuery custom content scroller(jQuery自定義內容滾動條)套件-教學撰寫:徐嘉裕Neil hsu

最近開發Xoops佈景時候需要修改瀏覽器原生的卷軸套件樣式，也就是overflow-Y: scroll，需要透過css自定義捲軸的背景顏色，但搞了半天IE可以Google可以Firefox就是不行，上網估狗過所有方法CSS都定義不起來，最後還是透過萬能的jQuery來解決吧，直接以程式來處理比用css搞半天快多了，效果還更美觀。

jQuery custom content scroller 插件網站
http://manos.malihu.gr/jquery-custom-content-scroller/

jQuery custom content scroller 插件效果演示範例
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html


也可以自行去我的G硬碟中下載已經整理好的套件回去用!!
https://drive.google.com/file/d/1sMrp6Tn2zlgyP1bCYowwHYLpTkcil2C0/view?usp=sharing

下載回來後吧scroller.rar解壓縮scroller資料夾看是放到佈景裡面的js資料夾還是模組裡面都可以!!

css引入

<link href="你的網站網址/js/scroller/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">

js引入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript" src="你的網站網址/js/scroller/js/jquery.mCustomScrollbar.concat.min.js"></script>

//定義scroller

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

.content為需要顯示卷軸特效的區塊

<div id='box'>
<div class='content'>內容內容內容內容內容內容內容</div>
</div>

另外.content需要定義容器的高度，這樣卷軸才會出現，例如!

.content {
position: relative;
height: 500px;
}

這樣就內容高度超過500px就會出現scroller捲軸特效，預設主題特效是light，可以自行定義，請參考jQuery custom content scroller網站下方的參數說明。

如果要改成其他主題只需要在mCustomScrollbar()函數中增加參數即可

<script>
    (function($){
        $(window).on("load",function(){
         //   $(".content").mCustomScrollbar();
$(".content").mCustomScrollbar({ theme: "rounded" });
        });

    })(jQuery);
</script>

有需要的朋友參考看看。

教學撰寫：徐嘉裕 Neil hsu