IntersectionObserver DOM是否交叉

IntersectionObserver 是一个用于观察目标元素与其祖先或顶级文档视窗（viewport）的交叉状态的 JavaScript API。使用它，你可以异步地检测一个元素何时进入或离开视窗，从而进行一些优化，比如延迟加载滚动或视窗外的图片等。

==兼容醒：IE全不支持 Edeg支持==

以下是使用 IntersectionObserver 的详细步骤：

创建 IntersectionObserver 实例。

javascript 复制代码

const observer = new IntersectionObserver(callback, options);

其中，callback 是一个回调函数，当目标元素的交叉状态发生变化时会被调用，参数是一个数组，每个元素代表一个目标元素的状态信息。options 是一个可选的配置对象，可以设置观察器的根元素（root）、阈值（threshold）、根边距（rootMargin）等。

将要观察的目标元素传递给 IntersectionObserver 的构造函数或其方法。

javascript 复制代码

observer.observe(targetElement);

observe` 方法可以将目标元素添加到观察器中，开始观察它的交叉状态。如果要观察多个节点元素，可以多次调用这个方法。

停止观察目标元素。

javascript 复制代码

observer.unobserve(targetElement);

unobserve` 方法可以将目标元素从观察器中移除，停止观察它的交叉状态。如果要停止观察多个元素，可以多次调用这个方法。

关闭观察器。

javascript 复制代码

observer.disconnect();

disconnect` 方法可以停止观察器中所有目标元素的交叉状态，关闭观察器。

下面是一个完整的示例代码：

javascript 复制代码

// 获取目标元素和容器元素
const targetElement = document.querySelector('#my-element');
const containerElement = document.querySelector('#my-container');

// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver(entries => {
  // entries 是一个包含目标的数组，每个目标都是一个对象，包含以下属性：
  // - target: 目标元素本身
  // - isIntersecting: 如果目标元素正在或已经与容器元素交叉，则为 true
  // - intersectionRatio: 目标元素与容器元素的交叉比例，0 表示没有交叉，1 表示完全交叉
  // - intersectionRect: 一个 DOMRect 对象，描述目标元素的交叉矩形
  // - targetRectangle: 一个 DOMRect 对象，描述目标元素相对于视窗的位置
  // - rootBounds: 一个 DOMRect 对象，描述根元素的边界（通常为视窗）
  // - bounds: 一个 DOMRect 对象，描述容器元素的边界
  // 可以根据需要使用这些属性进行进一步操作
  
  if (entries[0].isIntersecting) {
    // 目标元素已经进入视窗，可以加载图片或执行其他操作
    targetElement.classList.add('is-visible');
  } else {
    // 目标元素已经离开视窗，可以延迟加载图片或执行其他操作
    targetElement.classList.remove('is-visible');
  }
}, {
  root: containerElement, // 设置根元素，限制观察范围
  threshold: 0.5 // 设置阈值，当目标元素与容器元素的交叉比例超过0.5时触发回调函数
});

// 将目标元素传递给 IntersectionObserver
observer.observe(targetElement);

在上述示例中，我们首先获取目标元素和容器元素，然后创建一个 IntersectionObserver 实例，设置回调函数和配置对象。接着将目标元素传递给 observe 方法，开始观察它的交叉状态。当目标元素的交叉状态发生变化时，回调函数会被触发，并根据需要执行相应的操作。最后可以通过 unobserve 和 disconnect 方法停止观察和关闭观察器。