js鼠标滚轮谷歌和火狐兼容写法 onmousewheel

大闸蟹~

已于 2022-07-11 17:29:51 修改

阅读量420

点赞数

分类专栏： js

于 2022-07-11 17:20:30 首次发布

本文链接：https://blog.csdn.net/ychh1/article/details/125725981

版权

javascript

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 2000px;">
    
</body>
<script>
    //谷歌和IE浏览器
    // document.onmousewheel = function (e) {
    //     var ev = e || event;
    //     console.log(ev.wheelDelta);
    // }


    //火狐属于自己的兼容  只能使用DOM2事件处理程序添加
    // document.addEventListener('DOMMouseScroll',function(e){
    //     console.log(e.detail)
    // })


    //浏览器兼容性写法
    document.onmousewheel = handler;
    document.addEventListener("DOMMouseScroll",handler);
    function handler(e){
        var ev = e || event;
        if(ev.wheelDelta){
            if(ev.wheelDelta > 0){
                console.log("向上滚动...")
            }else{
                console.log("向下滚动...")
            }
        }else if(ev.detail){
            if(ev.detail > 0){
                console.log("向下滚动...")
            }else{
                console.log("向上滚动...")
            }
        }
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/timg.jpg" alt="">
    <script>
        var img = document.querySelector("img");
        //浏览器兼容性写法
        document.onmousewheel = handler;
        document.addEventListener("DOMMouseScroll",handler);
        function handler(e){
            var ev = e || event;
            console.log(ev)
            //谷歌最新版本更新后不支持
            ev.preventDefault() || (ev.returnValue = false);
            if(ev.wheelDelta){
                ev.wheelDelta > 0 ? img.width += 3 : img.width -= 3;
            }else if(ev.detail){
                ev.detail > 0 ? img.width -= 3 : img.width+= 3;
            }
        }
    </script>
</body>
</html>