JavaScript中的IntersectionObserver

demo http://blog.example.hizhiji.com/#/example?post=19

使用IntersectionObserver

1. 创建IntersectionObserver实例

首先，我们需要创建一个IntersectionObserver的实例。可以通过new IntersectionObserver()构造函数来创建一个新的实例，将一个回调函数和一些配置选项作为参数传入。这个回调函数将在被观察的元素进入或离开视口时被调用。

const intersectionObserver = new IntersectionObserver(entries => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log('元素进入视口');
      // 执行进入视口后的操作
    } else {
      console.log('元素离开视口');
      // 执行离开视口后的操作
    }
  }
}, options);

在上面的示例中，我们创建了一个IntersectionObserver实例，并定义了一个回调函数。回调函数中的entries参数是一个数组，包含了所有被观察元素与视口的交叉状态信息。我们可以遍历这个数组来处理每个元素的交叉状态。

options是一个可选的配置对象，可以设置一些参数来调整观察器的行为，例如root（视口元素）、rootMargin（视口边界）、threshold（交叉比例阈值）等。可以根据需要进行相应的配置。

2. 监听元素的交叉状态

创建IntersectionObserver实例后，我们可以通过调用observe()方法开始监听一个目标元素的交叉状态。

const targetElement = document.querySelector('.target');
intersectionObserver.observe(targetElement);

在上面的示例中，我们选择一个目标元素，然后调用observe()方法开始监听这个目标元素的交叉状态变化。一旦目标元素进入或离开视口，我们之前定义的回调函数将被触发。

3.停止监听元素的交叉状态

如果我们想要停止监听某个元素的交叉状态，可以使用unobserve()方法。

intersectionObserver.unobserve(targetElement);

上述代码会停止IntersectionObserver实例对目标元素的交叉状态进行监听。

4.停止监听所有元素的交叉状态

最后，如果我们想要停止监听所有元素的交叉状态，可以使用disconnect()方法。这将会停止IntersectionObserver实例的所有监听。

intersectionObserver.disconnect();

5.兼容性考虑

可以使用以下代码进行简单的兼容性检测：

if ('IntersectionObserver' in window) {
  // 浏览器支持IntersectionObserver
} else {
  // 浏览器不支持IntersectionObserver，执行相关兼容处理
}