Scroll wheel event

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

Scroll wheel event

Guess you like
