交叉口观察者 - 离开视口后如何删除类

Posted 2023-05-08

【中文标题】交叉口观察者 - 离开视口后如何删除类

【英文标题】：Intersection observer - How do you remove a class after leaving the view port

【发布时间】：2022-01-23 08:42:09

【问题描述】：

当 div 使用 Intersection Observer 进入视口时，我正在添加一个类。当 div 离开视口时，我只是不知道如何删除类。这是我目前所拥有的：

const callback = function (entries) 
    entries.forEach(entry => 
        if(entry.isIntersecting)
        
            entry.target.classList.add('animate1');
          observer.unobserve(entry.target)
          
    );

const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.overlay');
targets.forEach(target => 
    observer.observe(target);
)

【问题讨论】：

两件事：1. 你不能.unobserve() 并期望有另一个观察来确定是否不再有交叉点。 2. 你只需要一个 else 并删除那里的类。

【参考方案1】：

感谢您对兰迪的帮助。我确实让它工作了。这是最终代码：

const observer = new IntersectionObserver(entries => 
  entries.forEach(entry => 
    if (entry.intersectionRatio > 0) 
      entry.target.classList.add('animate1');
    
    else 
      entry.target.classList.remove('animate1');
    
  )
)
const boxElList = document.querySelectorAll('.overlay');
boxElList.forEach((el) => 
  observer.observe(el);
)