如何在元素不在视图中时移除其CSS类？

你原来的代码问题在于，元素进入视图后就调用了unobserve停止监听，所以无法捕获元素离开视图的状态。要实现「进入加类、离开移除类」的效果，只需要调整观察器的逻辑，持续监听元素的交叉状态即可：

修改后的完整代码 #

const appearOptions = {
  root: null, // 以浏览器视口作为根容器
  threshold: 0, // 元素只要有部分进入视口就触发回调
  rootMargin: "0px" // 无额外偏移
};

const appearOnScroll = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 根据元素是否在视口中，切换类名
    if (entry.isIntersecting) {
      entry.target.classList.add("appear");
    } else {
      entry.target.classList.remove("appear");
    }
  });
}, appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
});

关键改动说明 #

• 移除了appearOnScroll.unobserve(entry.target)：这会让观察器持续监听元素的交叉状态变化，不再只触发一次。
• 双向逻辑判断：通过entry.isIntersecting的布尔值，分别处理「进入视图添加类」和「离开视图移除类」的操作。
• 可选参数调整：你可以根据需求修改appearOptions的配置：
  • threshold：设置为0.5表示元素有50%进入视口才触发；设置为[0, 1]则会在元素刚进入和完全进入时都触发。
  • rootMargin：比如设置为"-50px"可以让触发时机提前50px，实现「还没完全进入视口就加类」的效果。

注意事项 #

确保faders是正确获取到的DOM元素集合，比如通过const faders = document.querySelectorAll('.your-element-class')来获取。

内容的提问来源于stack exchange，提问作者Habizsabi