javascript - Firefox 将添加到动画中的类保留在滚动中

Question

我想根据某些元素在窗口内部高度上的位置为它们添加一些动画。我编写了这段代码，它在 Chrome 上工作得很好，但在 Firefox 上，在我的代码发生任何更改后，它第一次工作得很好，然后在刷新后保留通过 JavaScript 添加的类:

const Elements = document.querySelectorAll("h1,p");
let AnimateOnScroll = (scrolledTop) => {
    Elements.forEach(Element => {

        if (scrolledTop + window.innerHeight > Element.offsetTop + Element.offsetHeight) {
            Element.classList.add("active");
        } else {
        }
    });
};
AnimateOnScroll(0);
window.addEventListener("scroll", () => {
    const scrolledTop = window.scrollY;
    AnimateOnScroll(scrolledTop);
});

我的代码有问题吗？为什么Firefox刷新后仍保留添加的类？

Answer 1

我相信保留类可能是基于此的功能之一 preserving states .

我会准备一个文档并检查该类是否存在，如果存在则将其删除。

保持其他代码不变，只需添加此代码

window.addEventListener("load", () => { 
    Elements.forEach(Element => { 
    Element.classList.remove("active"); 
  }); 
})

未优化且不确定如何优化。如果有人能纠正我那就太好了。