向下滚动时我的 JS 代码无法执行

Question

主要问题是当我用鼠标向下滚动我的香草JS代码不执行，因为forEach不是一个函数。我不知道为什么会这样，希望你能帮我解决这个问题，谢谢!

const boxes = document.querySelector(".box");
// event listener on scroll
window.addEventListener("scroll", animateDiv);
// visible content on load
animateDiv();
function animateDiv() {
const animateTrigger = (window.innerHeight / 5) * 4;
boxes.forEach((box) => {
// height of div from in comparison to scroll
const divTop = box.getBoundingClientRect().top;
if (divTop < animateTrigger) {
box.classList.add("show");
} else {
box.classList.remove("show");
}
});
}

Answer 1

我认为你需要使用这个

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

而不是querySelector