jQuery自定義滾動條插件mCustomScrollbar

寫項目的時候遇到了這種情況

我用了兩個iframe，左邊是一個菜單欄，可以展開也可以收回去的。就說這個滾動條太丑了，是瀏覽器默認的，所以學着用mCustomScrollbar來解決一下這個問題。

1：資源下載

　　https://github.com/malihu/malihu-custom-scrollbar-plugin，我是從這里下載的。

2：引入

　　注意順序。

    <link rel="stylesheet" type="text/css" href="../css/jquery.mCustomScrollbar.css">
    <script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.10.4.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mCustomScrollbar.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mCustomScrollbar.js"></script>

3：加載

　　我是對accordion進行了這個操作。

    <script type="text/javascript">
        (function($){
                $(window).load(function(){
                    $(".accordion").mCustomScrollbar();
                });
            })(jQuery);
    </script>

4：修改accordion的樣式

        .accordion{
            overflow:auto;
            height: 500px;    
        }

5：效果展示

　　出錯了，錯誤是有一個js文件沒找到，沒關系，找到剛才下載的文件，把下面說沒找到的js文件拷貝到項目的目錄中。問題解決。

　　

然后 可以看到有一個豎線，這個就是新的滾動條。當然 是可以自定義的，這里就不展示了。