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

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:33 PM

이벤트

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

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

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

事件 ID 4660：已删除对象 [修复]Jul 03, 2023 am 08:13 AM

我们的一些读者遇到了事件ID4660。他们通常不确定该怎么做，所以我们在本指南中解释。删除对象时通常会记录事件ID4660，因此我们还将探索一些实用的方法在您的计算机上修复它。什么是事件ID4660？事件ID4660与活动目录中的对象相关，将由以下任一因素触发：对象删除–每当从ActiveDirectory中删除对象时，都会记录事件ID为4660的安全事件。手动更改–当用户或管理员手动更改对象的权限时，可能会生成事件ID4660。更改权限设置、修改访问级别或添加或删除人员或组时，可能会发生这种情

在iPhone锁屏上获取即将到来的日历事件Dec 01, 2023 pm 02:21 PM

在运行iOS16或更高版本的iPhone上，您可以直接在锁定屏幕上显示即将到来的日历事件。继续阅读以了解它是如何完成的。由于表盘复杂功能，许多AppleWatch用户习惯于能够看一眼手腕来查看下一个即将到来的日历事件。随着iOS16和锁定屏幕小部件的出现，您可以直接在iPhone上查看相同的日历事件信息，甚至无需解锁设备。日历锁定屏幕小组件有两种风格，允许您跟踪下一个即将发生的事件的时间，或使用更大的小组件来显示事件名称及其时间。若要开始添加小组件，请使用面容ID或触控ID解锁iPhone，长按

在JavaScript中，"oninput"事件的用途是什么？Aug 26, 2023 pm 03:17 PM

当在输入框中添加值时，就会发生oninput事件。您可以尝试运行以下代码来了解如何在JavaScript中实现oninput事件-示例<!DOCTYPEhtml><html>  <body>   <p>Writebelow:</p>   <inputtype="text"

如何在PHP项目中实现日历功能和事件提醒？Nov 02, 2023 pm 12:48 PM

如何在PHP项目中实现日历功能和事件提醒？在开发Web应用程序时，日历功能和事件提醒是常见的需求之一。无论是个人日程管理、团队协作，还是在线活动安排，日历功能都可以提供便捷的时间管理和事务安排。在PHP项目中实现日历功能和事件提醒可以通过以下步骤来完成。数据库设计首先，需要设计数据库表来存储日历事件的相关信息。一个简单的设计可以包含以下字段：id：事件的唯一

jQuery中如何实现select元素的改变事件绑定Feb 23, 2024 pm 01:12 PM

jQuery是一个流行的JavaScript库，可以用来简化DOM操作、事件处理、动画效果等。在web开发中，经常会遇到需要对select元素进行改变事件绑定的情况。本文将介绍如何使用jQuery实现对select元素改变事件的绑定，并提供具体的代码示例。首先，我们需要使用标签来创建一个包含选项的下拉菜单：

jquery中常用的事件有哪些Jan 03, 2023 pm 06:13 PM

jquery中常用的事件有：1、window事件；2、鼠标事件，是当用户在文档上面移动或单击鼠标时而产生的事件，包括鼠标单击、移入事件、移出事件等；3、键盘事件，是用户每次按下或者释放键盘上的按键时都会产生事件，包括按下按键事件、释放按键按键等；4、表单事件，例如当元素获得焦点时会触发focus()事件，失去焦点时会触发blur()事件，表单提交时会触发submit()事件。

如何使用 PHP 构建基于事件的应用程序May 04, 2024 pm 02:24 PM

在PHP中构建基于事件的应用程序的方法包括：使用EventSourceAPI创建事件源，并在客户端使用EventSource对象监听事件。使用服务器发送的事件(SSE)发送事件，并在客户端使用XMLHttpRequest对象监听事件。一个实用的例子是在电子商务网站中使用EventSource实时更新库存计数，在服务器端通过随机更改库存并发送更新来实现，客户端则通过EventSource监听库存更新并实时显示。

Vue文档中的input框绑定事件详解Jun 21, 2023 am 08:12 AM

Vue.js是一种轻量级的JavaScript框架，具有易用、高效和灵活的特点，是目前广受欢迎的前端框架之一。在Vue.js中，input框绑定事件是一个十分常见的需求，本文将详细介绍Vue文档中的input框绑定事件。一、基础概念在Vue.js中，input框绑定事件指的是将输入框的值绑定到Vue实例的数据对象中，从而实现输入和响应的双向绑定。在Vue.j

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.