使用滚动条插件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加载了两次