我想在向下滾動頁面時設置元素的動畫。我只想使用 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
向下滾動網站后顯示 div
白衣染霜花
2023-06-29 21:02:10
