时间戳

首页 > 解决方案 > Firefox 保留在滚动动画中添加的类

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

问题描述

我想根据它们在窗口 innerHeight 上的位置对某些元素进行一些动画处理。我编写了这段代码，它在 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 刷新后仍保留添加的类？

标签： javascript

解决方案

我相信保留类可能是基于这种保留状态的特征之一。

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

保持其他代码不变，然后添加

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

未优化，不知道如何优化。如果有人能纠正我，那就太好了。

推荐阅读