IntersectionObserver

IntersectionObserver interface of the 交集观测器 API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's 视口 . The ancestor element or viewport is referred to as the root.

IntersectionObserver is created, it's configured to watch for given ratios of visibility within the root. The configuration cannot be changed once the IntersectionObserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple target elements with the same observer.

构造函数

IntersectionObserver.IntersectionObserver()
创建新的 IntersectionObserver object which will execute a specified callback function when it detects that a target element's visibility has crossed one or more thresholds.

特性

IntersectionObserver.root 只读
Element or Document whose bounds are used as the bounding box when testing for intersection. If no root value was passed to the constructor or its value is null , the top-level document's viewport is used.
IntersectionObserver.rootMargin 只读
An offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels ( px ) or as a percentage ( % ). The default is "0px 0px 0px 0px".
IntersectionObserver.thresholds 只读
A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.

方法

IntersectionObserver.disconnect()
Stops the IntersectionObserver object from observing any target.
IntersectionObserver.observe()
Tells the IntersectionObserver a target element to observe.
IntersectionObserver.takeRecords()
Returns an array of IntersectionObserverEntry objects for all observed targets.
IntersectionObserver.unobserve()
Tells the IntersectionObserver to stop observing a particular target element.

范例

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'));
					

规范

规范 状态 Comment
Intersection Observer
The definition of 'IntersectionObserver' in that specification.
工作草案

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
IntersectionObserver
Chrome 51 Edge 15 Firefox 55
55
不支持 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 Opera 38 Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android 41 Safari iOS 12.2 Samsung Internet Android 5.0
IntersectionObserver() 构造函数
Chrome 51 Edge 15 Firefox 55
55
不支持 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 Opera 38 Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS 12.2 Samsung Internet Android 5.0
disconnect
Chrome 51 Edge 15
15
Available since Windows Insider Preview Build 14986
Firefox 55
55
不支持 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 Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
observe
Chrome 51 Edge 15 Firefox 55
55
不支持 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 Opera Yes Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS 12.2 Samsung Internet Android 5.0
root
Chrome 51 Edge 15 Firefox 55
55
不支持 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 Opera Yes Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS 12.2 Samsung Internet Android 5.0
rootMargin
Chrome 51 Edge 15 Firefox 55
55
不支持 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 Opera Yes Safari 12.1
12.1
rootMargin does not work with <iframe> s.
WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS 12.2
12.2
rootMargin does not work with <iframe> s.
Samsung Internet Android 5.0
takeRecords
Chrome 51 Edge 15
15
Available since Windows Insider Preview Build 14986
Firefox 55
55
不支持 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 Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
thresholds
Chrome 51 Edge 15 Firefox 55
55
不支持 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 Opera Yes Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS 12.2 Samsung Internet Android 5.0
unobserve
Chrome 51 Edge 15
15
Available since Windows Insider Preview Build 14986
Firefox 55
55
不支持 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 Opera Yes Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS 12.2 Samsung Internet Android 5.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅