向下滚动网站后显示 div

Question

I want to set the animation of the element while scrolling down the page.我想在向下滚动页面时设置元素的动画。 I want to use only JavaScript to achieve that.我只想使用 JavaScript 来实现这一点。

I wanted it to work like this: There is no animation, but when you scroll down to second container, the JS sets the animation and the content inside the container is shown.我希望它像这样工作：没有动画，但是当您向下滚动到第二个容器时，JS 设置动画并显示容器内的内容。

The problem is, when I load the page, there is no animation (That's good).问题是，当我加载页面时，没有动画（很好）。 When I scroll down, there is still no animation (That's bad!) but when I refresh the page with F5 while being on the bottom of the site, the animation shows up but still not showing my element with blue background.当我向下滚动时，仍然没有动画（这很糟糕！）但是当我在网站底部使用 F5 刷新页面时，动画显示但仍然没有显示我的蓝色背景元素。

Here is my full code for this part:这是我这部分的完整代码：

    <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .main {
        display: block;
        margin: auto;
        height: 1000px;
        width: 100%;
        background-color: grey;
    }

    .main-inner1 {
        display: block;
        margin: auto;
        height: 600px;
        width: 100%;
        background-color: orange;
    }

    .main-inner2 {
        display: block;
        margin: auto;
        height: 600px;
        width: 100%;
        background-color: green;
    }

    .main-inner2-container {
        display: block;
        position: relative;
        height: 50px;
        width: 200px;
        overflow: hidden;
        margin: auto;
    }

    .main-inner2-content1 {
        display: block;
        position: absolute;
        top: 100%;
        margin: auto;
        height: 50px;
        width: 200px;
        background-color: blue;
    }

    @keyframes FadeIn {
        { from: top: 100%; }
        { to: top: 0; }
    }   

</style>
<script>
    
    document.addEventListener("DOMContentLoaded", function(){

        var y = window.scrollY;

        var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;

        if (y >= x) {
            document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
        } 
    });

</script>

<body>
<div class="main">
    <div class="main-inner1"></div>
    <div class="main-inner2">
        <div class="main-inner2-container">
            <div class="main-inner2-content1">
            
            </div>
        </div>
    </div>
</div>

I'm learning JS so it's important to me to not use any libraries :P我正在学习 JS，所以不使用任何库对我来说很重要：P

Thanks a lot非常感谢

Answer 1

I modified your code a bit.我稍微修改了你的代码。 You were listening for DOMContentLoaded event which is fired only once (after the DOM is completely loaded), instead of window scroll event.您正在侦听 DOMContentLoaded 事件，该事件仅触发一次（在 DOM 完全加载后），而不是窗口滚动事件。

 window.onscroll = function() { var y = window.scrollY; var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top; if (y >= x) { document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards"; } }

 * { margin: 0; padding: 0; } .main { display: block; margin: auto; height: 1000px; width: 100%; background-color: grey; } .main-inner1 { display: block; margin: auto; height: 600px; width: 100%; background-color: orange; } .main-inner2 { display: block; margin: auto; height: 600px; width: 100%; background-color: green; } .main-inner2-container { display: block; position: relative; height: 50px; width: 200px; overflow: hidden; margin: auto; } .main-inner2-content1 { display: block; position: absolute; top: 100%; margin: auto; height: 50px; width: 200px; background-color: blue; } @keyframes FadeIn { from { top: 100%; } to {top: 0; } }

 <div class="main"> <div class="main-inner1"></div> <div class="main-inner2"> <div class="main-inner2-container"> <div class="main-inner2-content1"> </div> </div> </div> </div>

Also, your syntax for defining keyframe was incorrect.此外，您定义关键帧的语法不正确。 It is这是

@keyframes FadeIn {
    from { top: 100%; } 
    to {top: 0; }
}

And not并不是

@keyframes FadeIn {
    { from: top: 100%; }
    { to: top: 0; }
}

向下滚动网站后显示 div

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-10-29 22:03:42

向下滚动网站后显示 div

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-10-29 22:03:42

解决方案1
3 已采纳 2020-10-29 22:03:42