向下滚动网站后显示 div
我想在向下滚动页面时设置元素的动画。我只想使用 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
白衣染霜花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; }}
随时随地看视频慕课网APP
相关分类
JavaScript