JavaScript事件类型：滚轮事件-原创手记-慕课网

滚轮事件

当用户通过鼠标滚轮在垂直方向上滚动页面时（向上或向下），就会触发mousewheel事件。这个事件可以在任何元素上触发，但最终都会冒泡到document或window对象上面。

事件对象event的属性：wheelDelta属性

wheelDelta：当用户向上滚动鼠标滚轮时，wheelDelta属性的值是120的倍数；当用户向下滚动鼠标滚轮时，wheelDelta属性的值是-120的倍数。

测试代码：

<div style='height:1500px'>
    <span style='position:fixed'>0</span>
</div>

document.addEventListener('mousewheel',function(event){
    document.getElementsByTagName('span')[0].firstChild.nodeValue=event.wheelDelta;
})

*多数情况下，只要知道鼠标滚动的方向就可以了，而这通过检测wheelDelta的正负号就可以确定。但是在Opera9.5之前的版本中，wheelDelta值得正负号是颠倒的。在文章下面的跨浏览器方案中会有解决的策略。

Firefox浏览器支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚轮滚动时触发。而有关滚轮事件的信息则保存在detail属性中。当用户向上滚动鼠标滚轮时，detail属性的值是-3的倍数；当用户向下滚动鼠标滚轮时，detail属性的值是3的倍数。

测试代码：

<div style='height:1500px'>
    <span style='position:fixed'>0</span>
</div>

document.addEventListener('DOMMouseScroll',function(event){
    document.getElementsByTagName('span')[0].firstChild.nodeValue=event.detail;
})

一个跨浏览器环境下的解决方案

代码如下：

//判断浏览器类型
var client = function () {
        var engine = {
            ie: 0,
            gecko: 0,
            webkit: 0,
            khtml: 0,
            opera: 0,
            ver: null
        };
        return {
            engine: engine
        };
    }();

var EventUtil = {
    getEvent: function (event) {
        return event ? event : window.event;
    },
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getWheelDelta: function (event) {
        var driect=null;
        if (event.wheelDelta) {
            driect=(client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            driect=-event.detail * 40;
        }
        return (driect>0?1:-1);
    }
};

//调用方法getWheelDelta()
(function(){
    function handleMouseWheel(event) {
        event = EventUtil.getEvent(event);
        var delta = EventUtil.getWheelDelta(event);
        alert(delta);
    }
    EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
    EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
})()
//输出：向上滚动鼠标滚轮时弹出‘1’，向下滚动鼠标滚轮时弹出‘-1’

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。

JavaScript事件类型：滚轮事件原创