My JS code doesn't execute when I scroll down

The main problem is when I scroll down with the mouse my vanilla JS code doesn't execute because forEach is not a function. I don't know why this happens, I hope you can help me with this issue, thanks!

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");
        }
    });
}