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

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

小孙小孙睡不醒

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

阅读量307

点赞数

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

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

版权

本文探讨了在JavaScript中如何处理火狐浏览器与Chrome滚动事件的差异，通过示例代码展示了如何根据不同浏览器调整DOMMouseScroll和mousewheel事件的处理方式，确保跨平台的滚动方向识别一致性。

摘要由CSDN通过智能技术生成

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

兼容问题

<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
在这里插入图片描述