我想在向下滾動(dòng)頁面時(shí)設(shè)置元素的動(dòng)畫。我只想使用 JavaScript 來實(shí)現(xiàn)這一點(diǎn)。我希望它像這樣工作：沒有動(dòng)畫，但是當(dāng)您向下滾動(dòng)到第二個(gè)容器時(shí)，JS 設(shè)置動(dòng)畫并顯示容器內(nèi)的內(nèi)容。問題是，當(dāng)我加載頁面時(shí)，沒有動(dòng)畫（這很好）。當(dāng)我向下滾動(dòng)時(shí)，仍然沒有動(dòng)畫（這很糟糕?。钱?dāng)我在網(wǎng)站底部使用 F5 刷新頁面時(shí)，動(dòng)畫會(huì)顯示，但仍然沒有顯示帶有藍(lán)色背景的元素。這是我這部分的完整代碼： <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>我正在學(xué)習(xí) JS，所以不使用任何庫對(duì)我來說很重要：P
向下滾動(dòng)網(wǎng)站后顯示 div
白衣染霜花
2023-06-29 21:02:10
