揭秘：如何准确判断鼠标滚轮上下滚动方向

人亦已歌

揭秘：如何准确判断鼠标滚轮上下滚动方向

判断鼠标滚轮是向上或向下滚动，不同的浏览器的判别方式是不一样的，当前比较流行的浏览器有 IE，Opera，Safari，Firefox，Chrome，在这个问题上Firefox和其他浏览器的实现方式是不一样的。现在通过一个具体的示例来分析这个问题吧！
 
示例代码如下：

2. <label for="wheelDelta">;滚动值:</label>;(IE/Opera)<input type="text" id="wheelDelta"/>;
3. <label for="detail">;滚动值:(Firefox)</label>;<input type="text" id="detail"/>;
4. <script type="text/javascript">;
5. /*注册事件*/
6. if(document.addEventListener){
7. document.addEventListener('DOMMouseScroll',scrollFunc,false);
8. }//W3C
9. window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
10. var scrollFunc=function(e){
11. e=e || window.event;
12. var t1=document.getElementById("wheelDelta");
13. var t2=document.getElementById("detail");
14. if(e.wheelDelta){//如果是IE/Opera/Chrome浏览器
15. t1.value=e.wheelDelta;
16. }else if(e.detail){//如果是Firefox浏览器
17. t2.value=e.detail;
18. }
19. }
20. </script>;

复制代码

通过运行上述代码我们可以看到：

在 Firefox 中使用detAIl，其余浏览器使用的是wheelDelta；两者虽在取值上不一致，但实际意思是一样的，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
 
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
 
代码部分如下，e.wheelDelta是判断是否为非firefox浏览器，e.detail判别为是firefox浏览器

2. if(e.wheelDelta){//IE/Opera/Chrome
3. t1.value=e.wheelDelta;
4. }else if(e.detail){//Firefox
5. t2.value=e.detail;
6. }

复制代码