【兼容】鼠标滚轮方向问题

最新推荐文章于 2023-08-26 03:00:31 发布

小孙小孙睡不醒

最新推荐文章于 2023-08-26 03:00:31 发布

阅读量282

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sylbiubiubiu/article/details/126674598

版权

鼠标滚动方向一般情况下向上值为正，向下值为负，但在火狐浏览器中相反。考虑处理兼容问题。

兼容问题

<script>
    window.onload = function(){
        var testNode = document.querySelector('#test');

        // 火狐
        if(testNode.addEventListener){
            testNode.addEventListener("DOMMouseScroll",function(ev){
                ev = ev||event;
                /*       
                向下：正
                向上：负
                 */
                console.log(ev.detail)
            })
        }
        // 非火狐浏览器
        testNode.onmousewheel = function(ev){
            ev = ev||event;
            /*
            向下：负
            向上：正 
            */
            console.log(ev.wheelDelta)
        }
    }
</script>

chrome
在这里插入图片描述

firefox
在这里插入图片描述

兼容代码

<script>
    window.onload = function(){
        var testNode = document.querySelector('#test');

        // 火狐
        if(testNode.addEventListener){
            testNode.addEventListener("DOMMouseScroll",fn);
        }
        // ！非火狐浏览器
        testNode.onmousewheel = fn;

        function fn(ev){
            ev = ev||event;
            var dir = "";
            if(ev.wheelDelta){
                dir = ev.wheelDelta>0 ? "up":"down";
            }
            if(ev.detail){
                dir = ev.detail<0 ? "up":"down";
            }
            console.log(dir)
        }

    }
</script>

chrome
在这里插入图片描述