向下滚动网站后显示 div答案

【问题标题】：Showing the div after scrolling down the website向下滚动网站后显示 div
【发布时间】：2021-02-12 09:22:36
【问题描述】：

我想在向下滚动页面时设置元素的动画。我只想使用 JavaScript 来实现。

我希望它像这样工作：没有动画，但是当您向下滚动到第二个容器时，JS 会设置动画并显示容器内的内容。

问题是，当我加载页面时，没有动画（很好）。当我向下滚动时，仍然没有动画（这很糟糕！）但是当我在网站底部使用 F5 刷新页面时，动画会显示但仍然没有显示我的蓝色背景元素。

这是我这部分的完整代码：

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

我正在学习 JS，所以不使用任何库对我来说很重要：P

非常感谢

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

我稍微修改了您的代码。您正在侦听仅触发一次的 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>

另外，您定义关键帧的语法不正确。这是

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

不是

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

【讨论】：

哦...非常感谢，我忘了如何编写关键帧。启动动画滚动工作，但我的内容仍然没有在容器中消失
对于淡入效果，您应该使用此关键帧 @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} }
它仍然没有显示内容 div。我可以看到动画正在运行，但没有任何显示。
我不确定你的意思...蓝色的 div 出现了，但你里面没有内容
我的意思是，它有蓝色背景，所以我应该在屏幕上看到它，但它是不可见的。即使我从父母那里删除背景颜色，它仍然不可见