自定义滚动条，滚轮事件

1. 自定义滚动条

滚动条的原理就是一个限制范围的拖拽，在拖拽的同时，让滚动条对应的内容按照比例修改定位值。
HTML:

<div id="text">
    <div id="con" style = "height:400px">
        成长是一种必然的经历，也是一种必受的折磨。青春~张扬喜......
    </div>
</div>
<div id="div1">
    <div id="div2"></div>
</div>

Javascript：

window.onload=function(){
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    var text=document.getElementById("text");
    var con=document.getElementById("con");
    
    div2.onmousedown=function(ev){
        var disY=ev.clientY-div2.offsetTop;
        var maxHeight=div1.clientHeight-div2.offsetHeight;
        var textMax=con.offsetHeight-text.offsetHeight;
        
        document.onmousemove=function(ev){
            var t=ev.clientY-disY;
            if(t<0){
                t=0;
            }else if(t>maxHeight){
                t=maxHeight;
            }
            
            var pecY=t/maxHeight;
            
            
            con.style.top=-textMax*pecY+'px';
            div2.style.top=t+'px';
        }
        document.onmouseup=function(){
            this.onmousemove=null;
        };
        
        return false;
    };
};

2. 鼠标滚轮事件

2.1 onmousewheel （IE/Chrome）

语法：

元素.onmousewheel = function(){
    执行事件
}

检测滚动方向:event.wheelDelta
如果向上滚动，返回值为 120
如果向下滚动，返回值为 -120

2.2 DOMMouseScroll （Firefox）

DOMMouseScroll这个事件只能通过addEventListener去添加

语法：

元素.addEventListener("DOMMouseScroll"，function(){
    执行事件
})

检测滚动方向: event.detail
在Firefox中
如果向上滚动的话，返回值为 -3
如果向下滚动，返回值为 3

2.3 滚轮事件封装

var text=document.getElementById("text");
    
    mScroll(text,function(){
        //这里是向上滚动需要执行的内容
    },function(){
        //这里是向下滚动需要执行的内容
    });


    function mScroll(obj,callBackUp,callBackDown){
        obj.onmousewheel=fn;
        obj.addEventListener('DOMMouseScroll',fn);
        
        function fn(eve){
            if(eve.wheelDelta==120||eve.detail==-3){
                //这个条件成立，说明鼠标都是往上滚动的
                //条件成立的时候调用callBackUp函数
                callBackUp();
            }else{
                //这个条件成立，说明鼠标都是往下滚动的
                //条件成立的时候调用callBackDown函数
                callBackDown();
            }
            eve.preventDefault();
        }
    }
};