我只是想使用 offsetTop 和 ScrollY 來操作類名。我有多個類名為 flex 的 div。我只是想使用條件陳述句添加和洗掉“幻燈片”類名。我可以在到達偏移邊界時添加“幻燈片”類名。但是退出邊界后我無法洗掉類名。請幫助我解決這種情況。我附上了下面的代碼。
function GetScroll() {
let FlexPositions = document.querySelectorAll(".flex");
let RemoveClass = document.querySelector("div");
FlexPositions.forEach(function(item) {
if (item.offsetTop < window.scrollY 300) {
RemoveClass.classList.remove('slide')
item.classList.add('slide');
}
})
}html,
body {
min-height: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.flex {
display: flex;
height: 100%;
}<body onscroll="GetScroll()">
<div class="flex">A</div>
<div class="flex">B</div>
<div class="flex">C</div>
<div class="flex">D</div>
<div class="flex">E</div>
<div class="flex">F</div>
<div class="flex">G</div>
</body>uj5u.com熱心網友回復：
這是作業代碼
您需要使用幻燈片類獲取元素
window.addEventListener("load", () => {
let flexPositions = document.querySelectorAll(".flex");
document.addEventListener("scroll", function() {
flexPositions.forEach(item => {
if (item.offsetTop < window.scrollY 300) {
document.querySelector("div.slide").classList.remove('slide')
item.classList.add('slide');
}
})
})
})html,
body {
min-height: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.flex {
display: flex;
height: 100%;
}
.slide {
background-color: red
}<div class="flex slide">A</div>
<div class="flex">B</div>
<div class="flex">C</div>
<div class="flex">D</div>
<div class="flex">E</div>
<div class="flex">F</div>
<div class="flex">G</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381592.html
標籤：javascript html css