Question

我创建了4个100％高度和宽度的部分。现在我试图在滚动（使用JavaScript）时获得所有部分的平滑幻灯片，但事件监听器以某种方式自动循环。它移动得非常缓慢而且没有停在任何部分。我曾尝试通过在开始滚动之前设置一个布尔值来使用锁定，并尝试删除事件监听器，但它们都没有工作。

＆＃13;

<!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>

＆＃13;

Answer 1

您可以尝试使用jQuery。

namespace WebApplication3.Data
{
    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }

        protected override void OnModelCreating(ModelBuilder builder)
        {
            base.OnModelCreating(builder);
        }

        public DbSet<WebApplication3.Models.Restaurant> Restaurant { get; set; }
        public DbSet<WebApplication3.Models.Customer> Customer { get; set; }
    }
}

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

1 个答案: