研究滚轮事件是因为在做一个翻版的fullpage.js,需要通过监听滚轮事件进行翻页。在实现过程中遇到了一些兼容性问题处理。所以顺便封装了个方法wheel(upFn, downFn),方便日后调用。

但W3C并没有对鼠标滚轮事件进行规范,各浏览器厂商封装了不同的实现方法,事件属性也不一样,号称最标准的FireFox,用了一个私有实现DOMMouseScroll。不过,其他浏览器都是用onmousewheel实现,所以做兼容处理的难度也不大。

浏览器 实现方法 事件属性 向上滚动 向下滚动
FireFox DOMMouseScroll detail -3的倍数 3的倍数
非FireFox onmousewheel wheelDelta 120的倍数 -120的倍数

在FireFox下,DOMMouseScroll必须通过addEventListener来绑定,如:
element.addEventListener("DOMMouseScroll",func,false) ;

在非FireFox下,就没有限制了,除了addEventListener方法,还可用下边的代码:
element.onmousewheel=function(){};

封装代码如下:

// 滚轮响应事件
// 参数:type有两个属性值,分别为"up"(滚轮向上)和"down"(滚轮向下)
function wheel(upFn, downFn) {
    // IE6
    window.onmousewheel = getWheelDalta;
    // Firefox
    if(window.addEventListener) {
        window.addEventListener("DOMMouseScroll", getWheelDalta, false);
    }
    // 获得鼠标滚轮事件
    function getWheelDalta(event) {
        var event = event || window.event;
        var delta = 0;
        // delta的返回值为正时,表示向前滚动;delta的返回值为负时,表示向后滚动;
        if (event.wheelDelta) {
            // IE中,鼠标滚轮信息存放在wheelDelta属性中;向前滚动时,wheelDelta的值是120的倍数;向后滚动时,wheelDelta的值是-120的倍数;
            delta = event.wheelDelta/120; 
            if (window.opera) delta = -delta;
        } else if (event.detail) {
            // Firefox的鼠标滚轮信息存放在detail属性中;向前滚动,detail的值是-3的倍数;向后滚动,detail的值是3的倍数;
            delta = -event.detail/3;
        }
        // 执行滚轮事件函数
        if(delta > 0) {
            upFn();
        }else {
            downFn();
        }

        // 阻止默认行为,防止当页面本身就存在滚动条时出现的异常
        prevent(event);
        function prevent(evt){
            if(evt.preventDefault){
                evt.preventDefault();
            }else{
                evt.returnValue = false;
            }
        }
    }   
}

测试调用:

function wheelUp() {
    alert("wheelUp");
}
function wheelDown() {
    alert("wheelDown");
}
wheel(wheelUp, wheelDown);

具体见下示例:

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/js/440