模拟滚动条

模拟滚动条

【html结构】: 外框里面的class都是固定的，注意每个模块的css有些是有定位属性的
<div class="" id="ID名">                            ---有position:relative; 和 overflow:hiddle; 属性
    <div class="scroll-content-wrap">内容区域</div>     ---有position:absolute; 属性
    <div class="scroll-ground-wrap">                    ---有position:absolute; 和 overflow:hiddle; 属性
        <span class="scroll-ground"></span>            ---有position:absolute; 属性    
    </div>
</div>

【js调用方法】:
var grounds=new scrollGround();
grounds.scrollBar({
    id:'ID名',    ---外框ID名
    oN:false    ---是否开启滚动小块的拖拉操作(默认为false，不开启)
});

【js实现代码】:
function scrollGround(){
    this.opt={
        id:'',
        oN:false
    };
    this.oPraentWrap=null;
    this.contentWrap=null;
    this.groundWrap=null;
    this.ground=null;

    this.praentH=0;            //父级高度
    this.conterH=0;            //内容高度
    this.groundwH=0;            //滚动块外框高度
    this.num=0;                //滚动块的高度值
    this.maxConterNum=0;        //内容的top最大值
    this.maxGroundNum=0;        //小滚动块的top最大值
};

scrollGround.prototype.scrollBar=function(opt){
    var This=this;
    $.extend(this.opt,opt);
    this.init();                    //初始化
};

scrollGround.prototype.init=function(){
    var This=this;
    this.oPraentWrap=$('#'+this.opt.id);
    this.contentWrap=this.oPraentWrap.find('.scroll-content-wrap');
    this.groundWrap=this.oPraentWrap.find('.scroll-ground-wrap');
    this.ground=this.oPraentWrap.find('.scroll-ground');

    this.praentH=this.oPraentWrap.outerHeight();
    this.conterH=this.contentWrap.outerHeight();
    this.groundwH=this.groundWrap.outerHeight();

    this.gdthHiddle();        //判断内容区域的高度是否超出外框高度，如果超出就隐藏滚动区域
    this.numGdtH();        //计算滚动块的高度值 = ( 父级外框高度/内容外框高度 )*滚动外框的高度
    this.scrollWeel();        //鼠标移入内容区域滚动滚动条
    if(this.opt.oN){            //开关打开时执行用户鼠标操作滚动小块
        this.eventWeel();
    };
};

scrollGround.prototype.gdthHiddle=function(){
    if(this.conterH<=this.praentH){
        this.groundWrap.hide();
    };
};

scrollGround.prototype.numGdtH=function(){
    this.num=( this.praentH/this.conterH ) * this.groundwH;
    this.ground.height(this.num);
};

scrollGround.prototype.scrollWeel=function(){
    var This=this;
    if(this.conterH<=this.praentH) return;
    this.maxConterNum=this.conterH-this.praentH;
    this.maxGroundNum=this.groundwH-this.num;

    mousewheel(this.oPraentWrap.get(0),function(){
        //滚动小块的top值变化
        var numBot=This.ground.position().top-5;
        if(numBot<=0){ numBot=0 };
        This.ground.css('top',numBot);

        //内容区域的top值变化 内容区域能走的top值=(滚动小块走的top/滚动小块能走的最大top)*内容能走的最大top
        var contentTop=(numBot/This.maxGroundNum)*This.maxConterNum;    
        This.contentWrap.css('top',-contentTop);
    },function(){
        //滚动小块的top值变化
        var numBot=This.ground.position().top+5;
        if(numBot>=This.maxGroundNum){ numBot=This.maxGroundNum };
        This.ground.css('top',numBot);

        //内容区域的top值变化
        var contentTop=(numBot/This.maxGroundNum)*This.maxConterNum;
        This.contentWrap.css('top',-contentTop);
    });

    //封装鼠标滚轮事件 向上滚和向下滚
    function mousewheel(obj,upFn,downFn){
        obj.onmousewheel = mousewheelFn;
        if( obj.addEventListener ){
            obj.addEventListener("DOMMouseScroll",mousewheelFn,false);
        };
        function mousewheelFn(ev){
            ev = ev || event;
            var direction = true;
            //IE和谷歌下滚轮事件 判断上滚还是下滚
            if( ev.wheelDelta ){
                direction = ev.wheelDelta > 0 ? true : false;
            };
            //火狐下滚轮事件 判断上滚还是下滚
            if( ev.detail ){
                direction = ev.detail < 0 ? true : false;
            };
            //向上或向下 分别执行不同的函数
            if( direction ){
                typeof upFn === "function" && upFn(ev);
            }else{
                typeof downFn === "function" && downFn(ev)
            };
            //火狐下 清除浏览器默认样式 (使用addEventListener时return false是没用的)
            if( ev.preventDefault ){ ev.preventDefault() };
            //IE和谷歌下 清除浏览器默认样式
            ev.returnValue = false;
        };    
        //用法：upFn函数代表滚轮向上滚动  downFn函数代表滚轮向下滚动     
    };
};     

scrollGround.prototype.eventWeel=function(){
    var This=this;
    this.ground.mousedown(function(event) {
        var GT=event.pageY-This.ground.position().top;
        $(document).mousemove(function(event) {
            //控制滚动小块的top值
            var GTX=event.pageY-GT;
            if(GTX<=0){ GTX=0 };
            if(GTX>=This.maxGroundNum){ GTX=This.maxGroundNum };
            This.ground.css('top',GTX);
            //控制内容区域的top值 CTX = (内容区域能走的最大距离*小块走的top值)/小块能走的最大距离
            var CTX=(This.maxConterNum*GTX)/This.maxGroundNum;
            This.contentWrap.css('top',-CTX);
        });
        $(document).mouseup(function(event) {
            $(document).off();
        });
        return false;
    });
};