Intersection Observer

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。

当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

构造器

IntersectionObserver.IntersectionObserver(): 创建一个新的IntersectionObserver对象，当其监听到目标元素的可见部分穿过了一个或更多阈(thresholds)时，会执行规定的回调函数。

属性

IntersectionObserver.root 只读: 所监听对象的具体祖先元素(element)。如果未传入任何值或值为null，则默认使用viewport。
IntersectionObserver.rootMargin 只读: 计算交叉时添加到根(root)边界盒bounding box的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素(pixel)(px)或百分比(percentage)(%)来表达, 默认值为"0px 0px 0px 0px"。
IntersectionObserver.thresholds 只读: 一个包含阈值的list, 升序排列, list中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知(Notification)。如果构造器未传入值, 则默认值为0.

方法

IntersectionObserver.disconnect: 使IntersectionObserver对象停止监听工作。
IntersectionObserver.observe: 使IntersectionObserver开始监听一个目标元素。
IntersectionObserver.takeRecords: 为所有监听目标返回一个IntersectionObserverEntry对象数组并且停止监听这些目标。
IntersectionObserver.unobserve: 使IntersectionObserver停止监听特定目标元素。
示例

var intersectionObserver = new IntersectionObserver(function(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 IntersectionObserver	Editor's Draft	Initial definition.

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`IntersectionObserver`	51	15	53 — 55¹ 55	No	?	?
`root`	51	15	53 — 55¹ 55	No	?	?
`rootMargin`	51	15	53 — 55¹ 55	No	?	?
`thresholds`	51	15	53 — 55¹ 55	No	?	?
`disconnect`	51	15²	53 — 55¹ 55	No	?	?
`observe`	51	15	53 — 55¹ 55	No	?	?
`takeRecords`	51	15²	53 — 55¹ 55	No	?	?
`unobserve`	51	15²	53 — 55¹ 55	No	?	?

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
`IntersectionObserver`	51	51	(Yes)	?	No	?	?
`root`	51	51	(Yes)	?	No	?	?
`rootMargin`	51	51	(Yes)	?	No	?	?
`thresholds`	51	51	(Yes)	?	No	?	?
`disconnect`	51	51	(Yes)	?	No	?	?
`observe`	51	51	(Yes)	?	No	?	?
`takeRecords`	51	51	(Yes)	?	No	?	?
`unobserve`	51	51	(Yes)	?	No	?	?

1. From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. Available since Windows Insider Preview Build 14986

构造器

属性

方法

示例

规范

浏览器兼容

文档标签和贡献者