JS基础(鼠标滚轮事件)

onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,

但是火狐不支持该属性

在火狐中需要使用DOMMouseScroll来绑定滚动事件

注意该事件需要通过addEventListener()函数来绑定

判断鼠标滚轮滚动的方向

event.wheelDelta可以获取鼠标滚轮滚动的方向

向上滚正值

向下滚负值

wheelDelta这个值我们不看大小,只看正负

wheelDelta火狐不支持

在火狐中使用event.detail来获取滚动的方向

向上滚是负值

向下滚是正值

使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false

需要使用event来取消默认行为

event.preventDefault();

但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错

        <style>
            #box1{
                 100px;
                height: 100px;
                background-color: #FF0000;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var box1=document.getElementById('box1');
                //正常浏览器通过onmousewheel来绑定鼠标滚轮滚动的事件(除火狐)
                box1.onmousewheel=function(event){
                    // alert("滚了")
                    event=event||window.event;
                    //event.wheelDelta是兼容一般浏览器(不兼容火狐)    向上是正值,向下是负值
                    //event.detail兼容火狐    向上是负值,向下是正值
                    if(event.wheelDelta>0 ||event.detail<0 )
                    {
                        box1.style.height=box1.clientHeight-10+'px';
                    }
                    else{
                        box1.style.height=box1.clientHeight+10+'px';
                    }
                    //取消默认事件,避免浏览器有滚动条时触发浏览器滚动条
                    //event.preventDefault不兼容IE8及以下所以判断
                    event.preventDefault&&event.preventDefault();
                    //不能用的情况下用return false来取消默认事件
                    return false;
                }
                //在火狐中需要使用DOMMouseScroll来绑定滚动事件
                box1.addEventListener("DOMMouseScroll",box1.onmousewheel);
            }
        </script>
    </head>
    <body>
        <div id="box1"></div>
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
    </body>
原文地址:https://www.cnblogs.com/MDZZZ/p/12497542.html