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

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

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

1. firefox滚轮事件绑定兼容

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

我们可以采用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就是这么
屌！！！

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

// 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)

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