JavaScript——滚轮事件的浏览器兼容处理

偏执的太偏执、 2022-05-18 04:36 266阅读 0赞

js中的滚轮事件`onmousewheel`和滚动事件`onscroll`是两个不同的事件，这一点一定要区分开。一个很好的表现为：

当我们在使用鼠标滚轮滑动滚动条的时候，滚轮事件和滚动事件会同时进行，但如果只是鼠标右键拖动滚动条，则只会触发滚动事件。

## 1. firefox滚轮事件绑定兼容 ##

在firefox浏览器中，并没有onmousewheel事件，因此也不能使用DOM0级事件进行滚轮事件的绑定，那么，在firefox中，该怎么绑定滚轮事件呢？

![这里写图片描述][70]

我们可以采用DOM2级事件绑定滚轮事件，不过需要注意的是，在firefox中滚轮事件的事件类型是 `DOMMouseScroll` ，具体代码如下：

dom.addEventListener("DOMMouseScroll", function(e) { 
        // 这里是事件函数主体
    })

## 2. firefox滚轮事件滚动方向兼容 ##

都知道，鼠标中间的滚轮可以向前和向后滚动，那么，对于滚轮事件，它一定有一个方向的属性。然而，firefox就是这么特立独行，不仅事件绑定的方式和其他浏览器不一样，就连方向属性和值的意义都不一样。下面我们就来看看它是多么的特立独行。

1）方向属性  
firefox中的滚轮方向是事件对象中的 `event.detail` 属性，而其他主流浏览器中滚轮方向属性是 `event.wheelDelta`  
2）方向取值  
firefox中的event.detail属性的值表现为：向前滚动（即使网页滚动条向上滚动对应的滚轮方向）取值为 -3，向后滚动为 3 。  
其他主流浏览器中的event.wheelDelta取值为：向前滚动取值为 120， 向后滚动为 -120 。

由此可以看出，不仅他们的方向值不一样，且正负代表的滚轮滚动方向也不一样。是不是很惊奇，firefox就是这么  
屌！！！

![这里写图片描述][70 1]

为了让所有浏览器的方向取值能够一直，我们可以在事件函数中做以下处理：

// firefox滚轮事件滚动方向兼容
    if(!e.wheelDelta) {
        e.wheelDelta = e.detail/-3*120;
    }

## 3. 完整的兼容处理代码 ##

为了兼容firefox，我们在绑定滚轮事件的时候只能使用DOM2级事件绑定，然而，DOM2级事件绑定IE浏览器又和其他的不一样了，且连事件的event对象在IE中也有兼容性问题。于是，为了兼容所有主流浏览器，请看下全面完整的兼容处理代码：

/* 参数含义 * DOM:需要绑定滚轮事件的对象 * callback: 事件回调函数 * bool: 是否需要阻止滚轮事件的默认事件 */
    function mousewheel(dom, callback, bool) { 
        var type = "mousewheel";
        if(dom.onmousewheel === undefined) {
            // 兼容firefox滚轮事件，事件类型为DOMMouseScroll且只能使用DOM2级事件绑定
            type = "DOMMouseScroll";
        }
    
        function fn(e) { 
            /* 滚轮滚动方向 * firefox：e.detail * IE/Chrome等：e.wheelDelta */
            var e = e || window.event;
    
            // firefox滚轮事件滚动方向兼容
            if(!e.wheelDelta) {
                e.wheelDelta = e.detail/-3*120;
            }
    
            if(!!bool) {
                if(e.preventDefault) {
                    e.preventDefault()
                } else {
                    //IE 阻止默认事件兼容
                    e.returnValue = false;
                }
            }
    
            callback && callback.call(this, e);
        }
    
        if(dom.addEventListener) {
            dom.addEventListener(type, fn)
        } else {
            // IEDOM2级事件绑定兼容
            dom.attachEvent("on" + type, fn)
        }
    }

上面的函数是一个集中处理滚轮事件浏览器兼容性的函数，如果需要使用滚轮事件，我们可以

mousewheel(document, function(e) { 
        if(e.wheelDelta > 0) {
            // 滚轮向前滚动处理
        } else {
            // 滚轮向后滚动处理
        }
    
    }, true)

如果大家觉得有什么问题，欢迎交流讨论，谢谢！

![这里写图片描述][70 2]

[70]: /images/20220518/b79871ae627f49a1a331229390d8d9eb.png
[70 1]: /images/20220518/0aa13b972cf246b58b31b2fab920866e.png
[70 2]: /images/20220518/8340d979148942a99cfdcd261f52ba2a.png