鼠标滚轮事件（兼容版）

案例背景

　　通过鼠标滚轮滚动，放大缩小容器（上滚变短，下滚变长）。
案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚轮事件</title>
    </head>
    <body>
        <div id="box1"></div>
    </body>
    <script>
        window.onload = function(){
            //获取div
            var box1 = document.getElementById("box1");
            
            // 为div绑定鼠标滚轮事件
            /**
             * onmousewheel鼠标滚轮事件，会在滚轮滚动时触发
             * *但是火狐不支持该属性
             * *在火狐中需要使用DOMMouseScroll 来绑定滚动事件
             * *并且该事件需要通过addEventListener() 函数来绑定
             */
            box1.onmousewheel = function(event){
                event = event || window.event;
                
                /**
                 * event.wheelDelta 可以获取鼠标滚轮事件的方向
                 * 向上滚 120   向下滚 -120
                 * wheelDelta这个值我们不看大小，只看正负
                 * 
                 * wheelDelta火狐不支持
                 * 在火狐中使用event.detail来获取滚动方向
                 * 向上滚 -3    向下滚 3
                 */
                
                // 判断鼠标滚动方向
                if(event.wheelDelta > 0 || event.detail < 0){
                    // 滚轮向上滚 box1变短
                    // clientHeight属性表示容器可见高度
                    box1.style.height = box1.clientHeight - 10 + "px";
                }else{
                    // 滚轮向下滚 box1变长
                    box1.style.height = box1.clientHeight + 10 + "px";
                }
                
                /**
                 * 使用addEventListener()方法绑定响应函数，取消默认行为是不能使用return false
                 * 需要使用event来取消 event.preventDefault()
                 * 但是IE8不支持
                 */
                event.preventDefault && event.preventDefault();
                
                /**
                 * 当滚轮滚动时，如果浏览器有滚动条，滚动条随之滚动
                 * 这是浏览器默认欣慰，不希望发生时，可取消
                 */
                return false;
            }
            
            // 为火狐绑定滚轮事件
            bind(box1 , "DOMMouseScroll" , box1.onmousewheel);
            
            // 事件绑定方法
            function bind(obj , eventStr , callback){
                if(obj.addEventListener){
                    // 大部分浏览器兼容的方式
                    obj.addEventListener(eventStr , callback , false);
                }else{
                    /**
                     * this是有谁调用方法决定
                     * callback.call(obj)
                     */
                    // IE8以下
                    obj.attachEvent("on"+eventStr , function(){
                        // 在匿名函数中调用回调函数
                        callback.call(obj);
                    })
                }
            }
        }
    </script>
    <style>
        #box1 {
            background-color: red;
             6.25rem;
            height: 6.25rem;
        }
    </style>
</html>