JavaScript鼠标滚动事件

Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta。不知道为何在该问题上其他厂商和微软的如此一致。Firefox可以使用addEventListener方法绑定DomMouseScroll事件。

elem.addEventListener('DOMMouseScroll', func, false);

IE和其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法,其他主流浏览器并不识别微软的这个方法。下面先测试一下。

鼠标移到此处,滚动滚轮

测试之后得到如下的结论。

    Firefox
    鼠标滚轮向上滚动是-3,向下滚动是3

    IE
    鼠标滚轮向上滚动是120,向下滚动是-120

    Safari
    鼠标滚轮向上滚动是360,向下滚动是-360

    Opera
    鼠标滚轮向上滚动是120,向下滚动是-120

    Chrome
    鼠标滚轮向上滚动是120,向下滚动是-120

代码尚有不适合之处。网上给的Safari的值为120,不过我测试的为360,也许是版本不同的原因。最终目的还是为了判断滚轮的滚动方向而已。毕竟这才是对我们编程有用的东西。

我要留言

留下您的脚印