所以这是我编写的代码，如您所见，当触发器触到红线时，方框开始将颜色更改为红色，但是当触发器再次通过红线时，某些方框将颜色再次变为红色。 。
function what() {
const trigger1 = document.querySelector(".trigger1").getBoundingClientRect().y;
const element = document.querySelectorAll(".ele");
if (trigger1 < 100) {
function why() {
for (let i = 0; i < element.length; i++) {
setTimeout(() => {
element[i].classList.add('newColor');
}, i * 500)
}
}
why();
} else {
element.forEach((e) => {
e.classList.remove('newColor');
})
}
}
window.addEventListener("scroll", what);* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
h1 {
background-color: lightcoral;
text-align: center;
padding: 1rem;
font-size: 2.5rem;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
ul {
position: fixed;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
text-align: center;
list-style: none;
}
ul li {
margin: 1rem;
padding: 1rem;
font-size: 2rem;
background-color: rgb(134, 146, 211);
}
.newColor {
color: white;
background-color: red;
}
.line {
position: fixed;
top: 100px;
width: 100%;
height: 1px;
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section>
<div class="line"></div>
<div>
<h1 class="trigger1">here's the trigger</h1>
<ul>
<li class="ele">ayyyo</li>
<li class="ele">woooo</li>
<li class="ele">yoooo</li>
<li class="ele">loool</li>
</ul>
</div>
</section>
<section>
<div>
<h1 class="trigger2">this is trigger 2</h1>
</div>
</section>
</body>
</html>我想做的是，当扳机碰到红线时，方框将颜色更改为红色。之后，当触发器返回（或将红线留在底部）时，这些框会将颜色更改为原始颜色，并且除非触发器再次击中红线，否则切勿将颜色更改为红色。
我可能需要使用clearTimeout东西，但不确定放在哪里或如何放置。
如果您让我知道如何解决这个问题，那就太好了……谢谢
您可以将全局变量用作clearTimeout的超时处理程序。