JavaScript监听鼠标滚轮事件详解：兼容性与数值判断

作者：小圆点

时间：2026-10-28

本文详解JavaScript中鼠标滚轮事件的监听方法，重点解决不同浏览器的兼容性问题。通过区分onmousewheel与DOMMouseScroll事件，并解析wheelDelta与detail属性的数值差异（±120与±3），提供完整的跨浏览器代码实现，帮助开发者准确判断滚轮滚动方向。

文章目录

JavaScript监听鼠标滚轮事件详解：兼容性与数值判断

在实际开发中，我们经常看到利用鼠标滚轮实现表单数字增减或按钮滚动等交互效果，这些功能均依赖于JavaScript对鼠标滚轮事件的监听。本文将介绍一种基础的JS监听鼠标滚轮事件的方法。

不同浏览器不同的事件

首先，不同浏览器对滚轮事件的支持存在差异。主要涉及两种事件：onmousewheel（Firefox不支持）和DOMMouseScroll（仅Firefox支持）。关于这两个事件的详细区别，可参考《鼠标滚轮(mousewheel)和DOMMouseScroll事件》一文。此外，在操作过程中需添加事件监听，以下代码展示了如何兼容Firefox，采用addEventListener进行监听。

http://tools.jb51.net/table/javascript_event

代码如下:

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

js返回数值判断滚轮上下

判断滚轮向上或向下时，需考虑浏览器的兼容性。目前五大主流浏览器（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){
e=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;
}

}

PS：这里再为大家推荐一款关于JS事件的在线查询工具，归纳总结了JS常用的事件类型与函数功能：

http://tools.jb51.net/table/javascript_event