IntersectionObserver

基线 广泛可用

此功能已完善，并在许多设备和浏览器版本中运行。它自 2019 年 3 月.

报告反馈

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

构造函数

IntersectionObserver()

创建 IntersectionObserver 时，会配置它以观察根元素内给定的可见比例。配置创建后无法更改，因此给定的观察器对象仅适用于观察可见比例的特定变化；但是，您可以使用同一个观察器观察多个目标元素。

实例属性

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

IntersectionObserver.root 只读

用于在测试相交时作为边界框的 Element 或 Document。如果构造函数没有传递 root 值或其值为 null，则使用顶级文档的视窗。

IntersectionObserver.rootMargin 只读

应用于根元素的 边界框 的偏移矩形，在计算相交时实际上缩小或扩大根元素以用于计算。此属性返回的值可能与调用构造函数时指定的相同，因为它可能会被更改以满足内部要求。每个偏移量可以使用像素 (px) 或百分比 (%) 表示。默认值为 "0px 0px 0px 0px"。

IntersectionObserver.thresholds 只读

实例方法

阈值的列表，按升序排列，其中每个阈值是观察到的目标的相交区域与边界框区域的比例。当目标越过任何阈值时，会为该目标生成通知。如果构造函数没有传递值，则使用 0。

IntersectionObserver.disconnect()

阻止 IntersectionObserver 对象观察任何目标。

IntersectionObserver.observe()

告诉 IntersectionObserver 要观察的目标元素。

IntersectionObserver.takeRecords()

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

IntersectionObserver.unobserve()

示例

告诉 IntersectionObserver 停止观察特定目标元素。
const intersectionObserver = new IntersectionObserver((entries) => {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// start observing
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

规范

js
规范
# Intersection Observer

浏览器兼容性

intersection-observer-interface

参见