IntersectionObserver
Baseline 广泛可用 *
IntersectionObserver 接口是 Intersection Observer API 的一部分，它提供了一种异步观察目标元素与祖先元素或顶级文档的 视口 交叉区域变化的方法。祖先元素或视口被称为“根”。
创建 IntersectionObserver 时，它会被配置为监视根元素内可见比例的给定阈值。一旦创建，该配置就无法更改。因此，同一个 observer 对象只能用于监视特定可见度变化阈值；不过，您可以使用同一个 observer 监视多个目标元素。
构造函数
IntersectionObserver()-
创建一个新的
IntersectionObserver对象，当它检测到目标元素的可见度已越过一个或多个阈值时，将执行指定的回调函数。
实例属性
IntersectionObserver.delay只读 实验性-
一个整数，表示此 observer 发送通知之间的最小延迟时间。
IntersectionObserver.root只读-
在测试交叉区域时用作边界框的
Element或Document。如果构造函数未传递root值或其值为null，则使用顶级文档的视口。 IntersectionObserver.rootMargin只读-
一个偏移矩形，在计算交叉区域时应用于根的 边界框，从而有效地缩小或扩大根以用于计算。此属性返回值可能与调用构造函数时指定的值不同，因为它可能会被修改以满足内部需求。每个偏移量都可以用像素 (
px) 或百分比 (%) 表示。默认值为 "0px 0px 0px 0px"。 IntersectionObserver.scrollMargin只读-
一个偏移矩形，应用于从交叉区域根到目标的路径上的每个 滚动容器，从而有效地缩小或扩大用于计算交叉区域的裁剪矩形。此属性返回值可能与调用构造函数时指定的值不同。
IntersectionObserver.thresholds只读-
一个按数值升序排列的阈值列表，其中每个阈值都是已观察目标交叉区域面积与其边界框面积的比率。当目标的任何阈值被越过时，就会为其生成通知。如果构造函数未传递任何值，则使用 0。
IntersectionObserver.trackVisibility只读 实验性-
一个布尔值，指示此
IntersectionObserver是否正在检查目标是否具有受损的可见性。
实例方法
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"));
规范
| 规范 |
|---|
| 交集观察器 # intersection-observer-interface |
浏览器兼容性
加载中…