监听鼠标上下滚动事件

js如何判断滚轮的上下滚动，我们应该都见到过这种效果，用鼠标滚轮实现某个表单内的数字向上滚动就增加，向下滚动就减少的操作，这种效果是通过 js对鼠标滚轮的事件监听来实现的。今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动，简要分享。

首先，不得不说一下，因为不同的浏览器有 不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两 个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件，所以在这个过程中需要添加事件监听， 代码如下：兼容firefox采用addEventListener监听。

?

1 2 3 4 5

/*注册事件*/ if(document.addEventListener){     document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

　　另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义却是一致的，detail只取±3，wheelDelta只 取±120，其中正数表示为向上，负数表示向下。
 
具体的示例代码如下所示：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/> <label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/> <script type="text/javascript"> var scrollFunc=function(e){     ee=e || window.event;     var t1=document.getElementById("wheelDelta");     var t2=document.getElementById("detail");     if(e.wheelDelta){//IE/Opera/Chrome         t1.value=e.wheelDelta;     }else if(e.detail){//Firefox         t2.value=e.detail;     } } /*注册事件*/ if(document.addEventListener){     document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome </script>

　　

通过运行上述代码我们可以得出以下结果：

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

?

1 2 3 4 5

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