IntersectionObserver - 提供了一种异步观察目标元素与祖先元素或顶级文档 viewport 的交集中的变化的方法

IntersectionObserver 是 Intersection Observer API 的接口，提供了一种异步观察目标元素与祖先元素或顶级文档 viewport 的交集中的变化的方法。祖先元素或视口称为根。

创建 IntersectionObserver 时，它被配置为监视根中给定的可见性比率。创建 IntersectionObserver 后，无法更改配置，因此给定的观察者对象仅用于观察可见度的特定变化; 但是，您可以使用相同的观察者观察多个目标元素。

构造函数

IntersectionObserver.IntersectionObserver()

创建一个新的 IntersectionObserver 对象，当它检测到目标元素的可见性超过一个或多个阈值时，将执行指定的回调函数。

属性

IntersectionObserver.root 只读

返回正在观察目标 element 的特定祖先。如果没有值传递给构造函数或者这是 null，则返回顶级文档的视口。

IntersectionObserver.rootMargin 只读

在计算交叉点时应用于根 bounding box 的偏移矩形，有效地缩小或增长根以用于计算目的。此属性返回的值可能与调用构造函数时指定的值不同，因为它可能会更改为匹配内部要求。每个偏移量可以用像素（px）或百分比（％）表示。默认值为 "0px 0px 0px 0px"。

IntersectionObserver.thresholds 只读

阈值列表，按增加的数字顺序排序，其中每个阈值是观察目标的交叉区域与边界框区域的比率。当针对该目标越过任何阈值时，将生成目标的通知。如果没有值传递给构造函数，则使用 0。

方法

IntersectionObserver.disconnect()

让 IntersectionObserver 对象停止观察任何目标。

IntersectionObserver.observe()

让 IntersectionObserver 一个要观察的目标元素。

IntersectionObserver.takeRecords()

返回所有观察目标的 IntersectionObserverEntry 对象数组。

IntersectionObserver.unobserve()

让 IntersectionObserver 停止观察特定的目标元素。

实例

var intersectionObserver = new IntersectionObserver(function(entries) {
  // 如果 intersectionRatio 为 0，则目标不在视图范围内，我们不需要执行任何操作。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('加载了新的项目');
});
// 开始观察
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

规范

规范	状态	备注
Intersection Observer IntersectionObserver 的定义	工作草案	-

桌面浏览器兼容性

移动浏览器兼容性

1. 自 Windows Insider Preview Build 14986 起可用

相关链接

• MutationObserver
• PerformanceObserver
• ResizeObserver