鼠标滚轮 | Rexana

对鼠标滚轮事件的绑定

谷歌和IE浏览器： onmouseWheel
火狐浏览器： addEventListener() + DOMMouseScroll；使用前应先判断该事件是否存在

上下滚动的判断

谷歌和IE浏览器：上滚为正，下滚为负，事件名：wheelDelta ；使用前应先判断该事件是否存在
火狐浏览器：上滚为负，下滚为正，事件名：detail；使用前应先判断该事件是否存在

禁止事件默认行为带来的默认事件

谷歌和IE浏览器：return false;
火狐浏览器： preventDefault;使用前应先判断该事件是否存在

通过鼠标滚轮改变div的高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标滚轮</title>
    </head>
    <style>
        #myDiv{
            width: 100px;
            height: 100px;
            background: #577909;
        }
        body{
            height: 2000px;
            /*会产生事件的默认行为*/
        }
    </style>
    <body>
        <div id="myDiv"></div>
    </body>
    <script>
        window.onload = function(){
            //获取元素
            var oDiv = document.getElementById('myDiv');
            
            //谷歌和IE，绑定鼠标滚轮事件
            oDiv.onmousewheel = fn;
            
            //火狐浏览器，绑定鼠标滚轮事件
            if(oDiv.addEventListener){
                oDiv.addEventListener('DOMMouseScroll',fn,false);
            }
            
            function fn(ev){
                var ev = ev ||event;
                var b = true;
                //判断是否存在该事件
                if(ev.wheelDelta){
                    //如果大于0，b=true，表示鼠标上滚，小于零，表示鼠标下滚
                    b = ev.wheelDelta > 0 ? true :false;
                }else{
                    //如果小于0，b=true，表示鼠标上滚，大于零，表示鼠标下滚
                    b = ev.detail < 0 ?true :false;
                }
                if(b){
                    //改变div的高度
                    this.style.height =this.offsetHeight + 10+"px"; 
                }else{
                    this.style.height = this.offsetHeight - 10 +"px";
                }
                //禁止默认行为
                //火狐
                if(ev.preventDefault){
                    ev.preventDefault();
                }
//              //谷歌
                return false;
            }
        }
    </script>
</html>

完整代码已上传至 https://github.com/rexana3/drag 文件名：鼠标滚轮.html