JavaScript判断鼠标滑轮是向下还是向上滚动

我们常用的就是鼠标，鼠标中键一般都用于滑动网页，但是网页中很多很炫的效果，使用鼠标滑轮操作更好。

当然对于手机就没有这个设备了，所以就不用考虑手机端的实现方法，手机端有触摸滑动事件。

使用JavaScript判断鼠标滑轮是向下还是向上滚动，这样有利于我们更加精确的控制滑轮的操作，比如上下滑动改变文本框的数字，向上就是增加，向下就是减少，很实用的功能。

 

首先，不得不说一下，因为不同的浏览器有 不同的滚轮事件。主要是有两种:

　　onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持）

　　关于这两 个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件，所以在这个过程中需要添加事件监听，

　　代码如下：兼容firefox采用addEventListener监听。

/*注册事件*/ 
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，其中正数表示为向上，负数表示向下。

具体的示例代码如下所示：

<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浏览器

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