使用滾動條插件mCustomScrollbar

之前自己寫了一個滾動條，后來了解到滾動條不同的瀏覽器的兼容性不一樣。

於是開始使用jquery的滾動條插件

先在js文件中實例化一個對象

createOrUpdateScroll:function(cls,type, hideBar,axis){ 
        //cls：待添加滾動條的容器
        //type：0-初始化， 1-更新
        //hideBar-是否自動隱藏滾動條，true：是,false:否
        //axis:待建立的坐標軸：x / y / yx
        var obj = $(cls);
        if(0 == type){
            var autoHideScrollbar = typeof(hideBar) == 'undefined' ? true : hideBar;
            var $axis = typeof(axis) == 'undefined' ? 'y' : axis;
            obj.mCustomScrollbar({
                axis:$axis,
                autoHideScrollbar:autoHideScrollbar,
                theme:"light-thin",
                scrollInertia:260
            });
        }else{
            obj.mCustomScrollbar("update");
            obj.mCustomScrollbar("scrollTo","top");
        }
    }

然后在需要加滾動條的div中設置樣式

div{
height:500px;
flowover-y:auto;
}

這樣就行了

 

=====================后續增加=========================

$("#jqDiv-body").mCustomScrollbar({
            autoHideScrollbar:true,
            theme:"light-thin",
            scrollInertia:260,
            callbacks:{
                whileScrolling:function(){
                    if(this.mcs.topPct > 10){
                        $(".right_tool_panel").fadeIn(1000);
                    }else{
                        $(".right_tool_panel").fadeOut(1000);
                    }
                }
            }
        });

上述寫法即可

如果存在兩個滾動條，可能是因為文件mCustomScrollbar.js加載了兩次