事件侦听器（滚动）反复运行
[英]Event listener (scroll) is running repeatedly
问题描述
我创建了4个高度和宽度均为100％的区域。 现在，我试图在滚动时（使用JavaScript）获得所有部分的平滑幻灯片，但是事件监听器会以某种方式自动循环。 它的移动非常缓慢，并且在任何部分都不会停止。 我尝试通过在开始滚动之前设置布尔值来使用锁，并且还尝试删除事件侦听器，但是没有一个起作用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Document</title> </head> <body onload="addEvent()" > <section id="sec1" class="even"> <div> <h1>Section 1</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, dignissimos impedit est earum odit eligendi inventore tenetur blanditiis? Adipisci laboriosam.</p> </div> <p class="smooth" > <i onclick="scrollDown()" class="fa fa-chevron-circle-down"></i> </p> </section> <section id="sec2" class="odd"> <div> <h1>Section 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio cumque nobis explicabo maiores, veniam libero temporibus necessitatibus repellendus aperiam unde.</p> </div> <p class="smooth" > <i onclick="scrollDown()" class="fa fa-chevron-circle-down"></i> </p> </section> <section id="sec3" class="even"> <div> <h1>Section 3</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, aliquam ut. Harum necessitatibus ipsam sequi unde dicta et ad id excepturi vero?</p> </div> <p class="smooth" > <i onclick="scrollDown()" class="fa fa-chevron-circle-down"></i> </p> </section> <section id="sec4" class="odd"> <div> <h1>Section 4</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore quidem fuga aliquid accusamus ipsa natus tenetur rerum ab incidunt minima atque!</p> </div> <p class="smooth" > <i onclick="scrollToTop()" class="fa fa-chevron-circle-up"></i> </p> </section> </body> <style> *{ box-sizing:border-box; font-size: calc(12px + 2vmin); font-family: Verdana, Geneva, Tahoma, sans-serif; color: black; } section>div{ height: 85%; } .smooth{ height: 15%; } body{margin:0;} section{ text-align: center; height: 100vh; width: 100%; padding: 13vmin; } section.even{ transition: 0.50s; background-color: rgb(41, 197, 119); } section.odd{ transition: 0.50s; background-color: rgb(37, 192, 212); } .fa-chevron-circle-up,.fa-chevron-circle-down{ font-size: 9vmin; color:white; opacity: 0.5; transition: 0.35s; } .fa-chevron-circle-up:hover,.fa-chevron-circle-down:hover{ font-size: 10vmin; color:white; opacity: 0.8; } .fa-chevron-up{ color:white; font-size: 5vmin; } </style> <script> //global vars let x; let lastPos = 0; let direction; let slide; var locked = false; function refresh(){ x = Number(document.body.scrollTop || document.documentElement.scrollTop); direction = (lastPos - x); lastPos = x; slide = Math.ceil(x/window.innerHeight); } function scrollDown(){ window.removeEventListener("scroll", smoothScroll); x = document.body.scrollTop || document.documentElement.scrollTop; slide = Math.ceil(x/window.innerHeight); let current = document.getElementsByTagName('section'); current[slide+1].scrollIntoView({ behavior: "smooth" }); window.addEventListener("scroll", smoothScroll); } function scrollToTop(){ window.removeEventListener("scroll", smoothScroll); x = document.body.scrollTop || document.documentElement.scrollTop; slide = Math.ceil(x/window.innerHeight); document.getElementsByTagName('section')[0].scrollIntoView({ behavior: "smooth" }); window.addEventListener("scroll", smoothScroll); } var smoothScroll = function (e){ x = Number(document.body.scrollTop || document.documentElement.scrollTop); direction = (lastPos - x); lastPos = x; console.log('x: ' + x); console.log("direction: " + direction); console.log("slide: " + slide); if(locked) return; locked = true; window.removeEventListener("scroll", smoothScroll); if(direction < 0 ){ x = document.body.scrollTop || document.documentElement.scrollTop; slide = Math.ceil(x/window.innerHeight); let current = document.getElementsByTagName('section'); if(slide != 3) current[slide+1].scrollIntoView({ behavior: "smooth" }); }else{ if(direction > 0 ){ x = document.body.scrollTop || document.documentElement.scrollTop; slide = Math.ceil(x/window.innerHeight); let current = document.getElementsByTagName('section'); if(slide != 0) current[slide-1].scrollIntoView({ behavior: "smooth" }); } } lastPos = x; x=0; window.addEventListener("scroll", smoothScroll); locked = false; } function addEvent(){ window.addEventListener("scroll", smoothScroll); refresh(); } </script> </html>
1 个解决方案
解决方案1
0 2018-03-04 12:46:04
您可以尝试使用jQuery。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> *{ box-sizing:border-box; font-size: calc(12px + 2vmin); font-family: Verdana, Geneva, Tahoma, sans-serif; color: black; } section>div{ height: 85%; } .smooth{ height: 15%; } body{margin:0;} section{ text-align: center; height: 100vh; width: 100%; padding: 13vmin; } section.even{ transition: 0.50s; background-color: rgb(41, 197, 119); } section.odd{ transition: 0.50s; background-color: rgb(37, 192, 212); } .fa-chevron-circle-up,.fa-chevron-circle-down{ font-size: 9vmin; color:white; opacity: 0.5; transition: 0.35s; } .fa-chevron-circle-up:hover,.fa-chevron-circle-down:hover{ font-size: 10vmin; color:white; opacity: 0.8; } .fa-chevron-up{ color:white; font-size: 5vmin; } </style> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script> </head> <body > <section id="sec1" class="even"> <div> <h1>Section 1</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, dignissimos impedit est earum odit eligendi inventore tenetur blanditiis? Adipisci laboriosam.</p> </div> <p class="smooth"> <a href="#sec2"> <i class="fa fa-chevron-circle-down"></i> </a> </p> </section> <section id="sec2" class="odd"> <div> <h1>Section 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio cumque nobis explicabo maiores, veniam libero temporibus necessitatibus repellendus aperiam unde.</p> </div> <p class="smooth" > <a href="#sec3"> <i class="fa fa-chevron-circle-down"></i> </a> </p> </section> <section id="sec3" class="even"> <div> <h1>Section 3</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, aliquam ut. Harum necessitatibus ipsam sequi unde dicta et ad id excepturi vero?</p> </div> <p class="smooth" > <a href="#sec4"> <i class="fa fa-chevron-circle-down"></i> </a> </p> </section> <section id="sec4" class="odd"> <div> <h1>Section 4</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore quidem fuga aliquid accusamus ipsa natus tenetur rerum ab incidunt minima atque!</p> </div> <p class="smooth" > <a href="#sec1"> <i class="fa fa-chevron-circle-up"></i> </a> </p> </section> </body> </html>
querySelector事件监听器`scroll`
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.