IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

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

构造器

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

属性

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

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
IntersectionObserver
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
IntersectionObserver() constructor
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera ? Safari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
root
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
rootMargin
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari Full support 12.1
Notes
Full support 12.1
Notes
Notes rootMargin does not work with <iframe>s.
WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support 12.2
Notes
Full support 12.2
Notes
Notes rootMargin does not work with <iframe>s.
Samsung Internet Android Full support 5.0
thresholds
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
disconnect
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari ? WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
observe
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
takeRecords
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari ? WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
unobserve
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled 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.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参考

 

文档标签和贡献者

此页面的贡献者: ZivHe, mdnwebdocs-bot, SolitudeRA, jpmedley
最后编辑者: ZivHe,