使用滚动条插件mCustomScrollbar

最新推荐文章于 2021-03-17 09:46:38 发布

巷中人

最新推荐文章于 2021-03-17 09:46:38 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhengyuanyuan/p/8435592.html

本文介绍了如何使用jQuery的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);
                    }
                }
            }
        });