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


如果事件1和事件2的参数都为 true,那么会弹出“ 1,2”;
如果事件1和事件2的参数都为 false,那么会弹出“ 2,1”;
如果事件1和事件2的参数分别为 true,false,那么会弹出“ 1,2”;
如果事件1和事件2的参数分别为 false,true,那么会弹出“ 2,1”;
猛击demo ☻

发表评论

电子邮件地址不会被公开。 必填项已用*标注