IntersectionObserver.IntersectionObserver()

在此页

句法
范例
规范
浏览器兼容性
相关话题

IntersectionObserver() constructor creates and returns a new IntersectionObserver 对象。 rootMargin , if specified, is checked to ensure it's syntactically correct, the thresholds are checked to ensure that they're all in the range 0.0 and 1.0 inclusive, and the threshold list is sorted in ascending numeric order. if the threshold list is empty, it's set to the array [0.0].

句法

var observer = new IntersectionObserver(callback[, options]);

参数

callback

A function which is called when the percentage of the target element is visible crosses a threshold. The callback receives as input two parameters:

entries: An array of IntersectionObserverEntry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold.
observer: IntersectionObserver for which the callback is being invoked.

选项 可选

An optional object which customizes the observer. If


								选项

isn't specified, the observer uses the document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is enough to trigger a callback). You can provide any combination of the following options:

root: 元素 or Document object which is an ancestor of the intended target, whose bounding rectangle will be considered the viewport. Any part of the target not visible in the visible area of the root is not considered visible.
rootMargin: A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is approximately the same as that for the CSS margin property; see The root element and root margin in 交集观测器 API for more information on how the margin works and the syntax. The default is "0px 0px 0px 0px".
threshold: Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. A value of 0.0 means that even a single visible pixel counts as the target being visible. 1.0 means that the entire target element is visible. See 阈值 in 交集观测器 API for a more in-depth description of how thresholds are used. The default is a threshold of 0.0.

返回值

新的 IntersectionObserver which can be used to watch for the visibility of a target element within the specified root crossing through any of the specified visibility threshold s. Call its observe() method to begin watching for the visibility changes on a given target.

异常

SyntaxError: 指定 rootMargin 无效。
RangeError: One or more of the values in threshold is outside the range 0.0 to 1.0.

范例

This example creates a new intersection observer which calls the function myObserverCallback every time the visible area of the element being observed changes by at least 10%.

let observer = new IntersectionObserver(myObserverCallback,
                   {threshold: 0.1});

规范

规范	状态	注释
Intersection Observer The definition of 'IntersectionObserver constructor' in that specification.	工作草案	初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	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 ). To change preferences in Firefox, visit	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
`root` option can be a `Document`	Chrome 81	Edge 81	Firefox 76	IE No	Opera 68	Safari No	WebView Android 81	Chrome Android 81	Firefox Android No	Opera Android 58	Safari iOS No	Samsung Internet Android No

图例

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

元数据

最后修改： May 4, 2020

交集观测器 API
IntersectionObserver
构造函数
1. IntersectionObserver()
特性
方法
Related pages for Intersection Observer API
1. IntersectionObserverEntry

在此页

句法

参数

返回值

异常

范例

规范

浏览器兼容性

图例

相关话题