Event listener (scroll) is running repeatedly
Question
I've created 4 sections of 100% height and width. Now I am trying to get smooth slides of all section while scrolling (using JavaScript) but the Event listener is somehow looping automatically. It's moving very slowly and not stopping in any section. I've tried to use a lock by setting a boolean value before starting to scroll and also tried to remove the event listener but none of them are working.
<!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 answers
solution1
0 2018-03-04 12:46:04
You can try using 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
querySelector event listener `scroll`
Event Listener Scroll or Click
“scroll” event listener not working
Scroll event listener javascript
Scroll event listener not firing
disable scroll event listener for sometime
Y scroll event listener useEffect
How to remove scroll event listener?
JavaScript scroll event listener not working
Click event listener is being repeatedly triggered without any clicks?
Related Tags