解决JS onmousewheel事件在Chrome中多次触发导致滚动异常

作者：像素漫游时间：2026-10-28 15:02:36浏览：423

本文分析并解决Chrome浏览器中onmousewheel事件因快速滚动而多次触发导致的整屏切换失效问题。通过禁用滚动事件监听器并在动画完成后再重新绑定，有效防止了函数重复调用，实现了平滑的单次滚动切换效果。

onmousewheel事件多次触发问题分析与解决

为了实现首屏与第二屏之间通过鼠标滚轮进行整屏切换的效果，过程中遇到了一些挑战。在kk的协助下，最终解决了这些问题，特此记录分享。

最初的实现代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
div {
width: 700px;
height: 1000px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
</body>

<script src="../jQuery/jquery.min.js"></script>
<script src="test.js"></script>
</html>


$(document).ready(function(){
var height = $(window).height(); //获取浏览器窗口当前可见区域的大小
　　　　//鼠标滚动之后整屏切换
var scrollFunc = function(e){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){ //不同浏览器向下滚动 
$(document.body).animate({scrollTop:height}, "fast");
$(document.documentElement).animate({scrollTop:height}, "fast");
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){ //不同浏览器向上滚动
$(document.body).animate({scrollTop:0}, "fast");
$(document.documentElement).animate({scrollTop:0}, "fast");
}
};
　　　　//注册事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel = document.onmousewheel = scrollFunc; //IE、chrome、safira
});

该代码在IE和Firefox浏览器中测试运行正常，但在Chrome浏览器下，onmousewheel事件会频繁被多次触发，这带来了极大的困扰。经调试发现，原因是用户滚动鼠标时往往幅度较大，而非逐格缓慢滚动，这导致onmousewheel事件被连续触发并调用scrollFunc函数。由于函数内部的animate动画尚未执行完毕，新的滚动事件仍在不断调用该函数，从而造成滚动条无法滚动或页面无法上移的异常现象。因此，对上述JS代码进行了如下修改：


$(document).ready(function(){
var height = $(window).height();
var scrollFunc = function(e){
document.onmousewheel = undefined;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){ 
$(document.body).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
$(document.body).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}
};
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
document.onmousewheel = scrollFunc;
});

修改后的代码已能正常运行。然而，由于代码尚不够精炼，再次受到kk的指导，对冗余部分进行了进一步优化：


$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var body;
if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("MSIE")>0){
body = document.documentElement;
}else{
body = document.body;
}
var isFinish = true;
var scrollFunc = function(e){
if(isFinish){
var scrollTop = body.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height-20){ 
scroll(height);
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
scroll(0);
}
}

};
var scroll = function(height){
isFinish = false;
$(body).animate({scrollTop:height},"fast","linear",function(){
isFinish = true;
});
};
if(navigator.userAgent.indexOf("Firefox")>0){
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
}else{
document.onmousewheel = scrollFunc;
}
});

最终得到了简洁的代码。通过解决这一问题，收获颇丰。未来需朝着“write less, do more”的目标继续努力。

若文中存在错误，欢迎各位大神指正，我将虚心学习。

作者最新文章

D3.js 处理大规模数据点的性能优化策略

2026-11-05 15:37:25

JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程

2026-11-05 15:27:28

D3.js v5 迁移到 v7 的 API 变更与注意事项

2026-11-05 11:57:17

使用 animate.js 实现多元素协同的序列动画

2026-11-04 22:27:53

JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战

2026-11-04 10:12:22