事件侦听器（滚动）重复运行

问题描述 投票：0回答：1

我创建了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>
javascript html scroll event-listener
1个回答
0
投票

您可以尝试使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.