滚轮事件

鼠标滚轮事件：
        onmousewheel://IE系列,chrome;FF不兼容;
        DOMMouseScroll:兼容FF;
                必须通过事件绑定来添加：
                document.addEventListener('DOMMouseScroll',fn,false);

        IE和Chrome： oEvent.wheelDelta
            上： 120；
            下： -120；
        FF： oEvent.detail
            上：-3;
            下：3;
            
   　　 oEvent.preventDefault():阻止火狐的浏览器默认行为;
　　    onkeydown: 键盘按下的时候触发,

 

addWheel.js
                          

 function addEvent(obj,ev,fn){    //事件绑定
          if(obj.attachEvent){obj.attachEvent('on'+ev,fn); //ie8--;
          }else{obj.addEventListener(ev,fn,false)}  //ff,chrome,ie9++;
      }
 function addWheel(obj,fn){
     function wheel(ev){
        var e=ev||event;
        var bDown=true;
        bDown=e.wheelDelta?e.wheelDelta>0:e.detail<0;
        fn&&fn(bDown);//函数存在则传参执行;
        e.preventDefault&&e.preventDefault();//ff下阻止有滚动条时不随滚动条滚动
        return false;
        }
       if(window.navigator.userAgent.toLowerCase().indexOf('firefox')!=-1){  //ff下的滚轮事件
           addEvent(obj,'DOMMouseScroll',wheel);
        }else{
           addEvent(obj,'mousewheel',wheel);    //ie和chrome
             }
    }

 

 

漂亮的滚动条:
                                window.onload=function(){
                                                var oBig=document.getElementById("big");
                                                var oSmall=document.getElementById("small");
                                                var oBox1=document.getElementById("box1");
                                                var oBox2=document.getElementById("box2");
                                                var oWrap=document.getElementById("wrap");
                                                function setTop(t){     //大、小盒子运动以及限定小盒子的运动范围
                                                            if(t<0){t=0;}
                                                            else if(t>oBig.offsetHeight-oSmall.offsetHeight){
                                                                    t=oBig.offsetHeight-oSmall.offsetHeight;
                                                                }
                                                                var scale=t/(oBig.offsetHeight-oSmall.offsetHeight);
                                                                oSmall.style.top=t+'px';
                                                                oBox2.style.top=scale*(oBox1.offsetHeight-oBox2.offsetHeight)+'px';
                                                }
                                                oSmall.onmousedown=function(ev){     //鼠标事件
                                                                var e=ev||event;
                                                                var disY=e.clientY-oSmall.offsetTop;
                                                                document.onmousemove=function(ev){
                                                                            var e=ev||event;
                                                                            var t=e.clientY-disY;
                                                                            setTop(t);
                                                                }
                                                                document.onmouseup=function(){
                                                                            document.onmousemove=null;
                                                                            document.onmouseup=null;
                                                                            oSmall.releaseCapture&&oSmall.releaseCapture();
                                                                }
                                                    oSmall.setCapture&&oSmall.setCapture();
                                                    return false;
                                                }
                                                document.onkeydown=function(ev){   //键盘事件
                                                    var e=ev||event;
                                                    var t=oSmall.offsetTop;
                                                    switch(e.keyCode){
                                                        case 38:
                                                                    t-=10;
                                                                    break;
                                                        case 40:
                                                                    t+=10;
                                                                    break;
                                                    }
                                                    setTop(t);
                                                }
                                                addWheel(oWrap,function(bDown){    //滚轮事件
                                                                var t=oSmall.offsetTop;
                                                                if(bDown){
                                                                    t-=10;
                                                                }else{t+=10;}
                                                                setTop(t);
                                                })
                                            }