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.

浏览器兼容

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
IntersectionObserver5115

53 — 551

55

No ? ?
root5115

53 — 551

55

No ? ?
rootMargin5115

53 — 551

55

No ? ?
thresholds5115

53 — 551

55

No ? ?
disconnect51152

53 — 551

55

No ? ?
observe5115

53 — 551

55

No ? ?
takeRecords51152

53 — 551

55

No ? ?
unobserve51152

53 — 551

55

No ? ?
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
IntersectionObserver5151 (Yes) ? No ? ?
root5151 (Yes) ? No ? ?
rootMargin5151 (Yes) ? No ? ?
thresholds5151 (Yes) ? No ? ?
disconnect5151 (Yes) ? No ? ?
observe5151 (Yes) ? No ? ?
takeRecords5151 (Yes) ? No ? ?
unobserve5151 (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

 

文档标签和贡献者

 此页面的贡献者: CauserLee, jpmedley
 最后编辑者: CauserLee,