js onmousewheel 이벤트가 여러 번 발생했습니다. 문제 해결 방법

js onmousewheel 이벤트가 여러 번 발생했습니다. 문제 해결 방법_javascript 기술

WBOY

풀어 주다： 2016-05-16 16:33:24

원래의

1360명이 탐색했습니다.

첫 번째 화면과 두 번째 화면 사이에서 마우스 휠을 굴려 원활한 전환 효과를 만들고 싶었는데, 나중에 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에서 정상적으로 테스트되었지만 Google에서는 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;
}
});

로그인 후 복사

이 문제를 해결하면서 많은 것을 배웠다고 말씀드리고 싶습니다. 앞으로는 "적게 쓰고, 더 많이 한다"는 목표를 향해 더 열심히 하겠습니다! ! !

제가 쓴 내용에 문제가 있는 경우 언제든지 조언을 주시면 열린 마음으로 배워보겠습니다.