IntersectionObserver：找出元素何时在视口之外

Question

使用 IntersectionObserver API，我如何才能知道特定元素何时在视口之外？

一旦用户滚动到 header，并且 header 不再位于视口内，我需要输出控制台日志。我想使用 IntersectionObserver 而不是滚动事件侦听器来最小化异步工作时的负载。到目前为止我的代码是：

let options = {
   root: null, //root
   rootMargin: '0px',
   threshold: 1.0,
 };

 function onChange(changes, observer) {
    changes.forEach(change => {
       if (change.intersectionRatio < 0) {
          console.log('Header is outside viewport');
        }
    });
  }

  let observer = new IntersectionObserver(onChange, options);

  let target = document.querySelector('#header');
  observer.observe(target);

此代码不输出任何控制台日志。 PS：我的 <header> 元素的 ID 为 header。

Answer 1

你的代码有两个问题：

您的 options.threshold 定义为“1”。这意味着 onChange 总是在 intersectionRatio 从值 <1 变为 1 时执行，反之亦然。但你真正想要的是 threshold of "0".
intersectionRatio 从不低于 0。因此，您必须将 if 子句中的条件更改为 change.intersectionRatio === 0.

IntersectionObserver：找出元素何时在视口之外

IntersectionObserver: find out when element is outside viewport

javascript

intersection-observer