Javascript判断鼠标滚动方向

做项目的时候,有时候需要判断鼠标滚轮的滚动方向,很常见的一个使用场景就是用js去模拟滚动条,判断的方法很简单:
IE、chrome、opera、safari 都使用 mousewheel 事件,用传统的事件绑定就 OK;
Firefox 又玩个性,它要使用 DOMMouseScroll 事件,并用 addEventListener 方法绑定;

// firefox
if(Element.addEventListener){
    Element.addEventListener('DOMMouseScroll', function(event){
        event.target.innerHTML = event.detail; //滚动的值
    }, false);
}

// ie & chrome & opera & safari
Element.onmousewheel = function(event) {
    event = event || window.event;
    Element.innerHTML = event.wheelDelta; //滚动的值
};

具体的值其实我们不在乎,关键是能判断好方向就行了,Firefox 的 addEventListener 方法里有一个布尔值参数,它的作用是判断一个绑定了不同事件的元素,用什么顺序去执行这些事件:

// 事件1
Element.addEventListener("click",function(){
    alert("1");
},boolean);

// 事件2
Element.addEventListener("click",function(){
    alert("2");
},boolean);

继续阅读 Javascript判断鼠标滚动方向