IntersectionObserver怎么用？

IntersectionObserver 是一个现代浏览器提供的 API，用于监听元素与其祖先元素或顶层文档视窗(viewport)交叉的情况，即元素是否进入或离开视窗。

使用 IntersectionObserver API，需要进行以下步骤：

创建一个 IntersectionObserver 实例，需要传入一个回调函数和一个可选的配置对象。

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
};

const observer = new IntersectionObserver(callback, options);

其中，callback 是一个回调函数，当被观察的元素的交叉状态发生变化时，就会被调用。options 是一个配置对象，它有以下属性：

root：指定根元素，默认为 null，即使用视窗作为根元素。
rootMargin：指定根元素的边界，默认为 '0px'。
threshold：指定交叉比例的阈值，取值在 0~1 之间，默认为 0。

将需要观察的元素添加到 IntersectionObserver 实例中。

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

其中，target 是需要观察的元素。

在回调函数中处理交叉状态的变化。

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('进入视窗');
    } else {
      console.log('离开视窗');
    }
  });
};

在回调函数中，entries 参数是一个 IntersectionObserverEntry 对象数组，它记录了被观察元素与根元素或视窗的交叉状态。observer 参数是当前的 IntersectionObserver 实例。

停止观察元素。

observer.unobserve(target);

如果不再需要观察某个元素，可以使用 unobserve 方法停止观察。

总之，IntersectionObserver API 提供了一种高效、灵活的方法来监听元素与视窗的交叉状态，可以用于实现各种功能，如懒加载、无限滚动等。

IntersectionObserver怎么用？

猜你喜欢