在此页

• 构造函数
• 特性
• 方法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

IntersectionObserver 接口在 交集观测器 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 viewport . 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 只读

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

规范

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

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 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 41	Safari iOS 12.2	Samsung Internet Android 5.0
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
disconnect	Chrome 51	Edge 15 15 Available since Windows Insider Preview Build 14986	Firefox 55 55 不支持 53 — 55 Disabled Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	IE No	Opera Yes	Safari 12.1 12.1 rootMargin does not work with <iframe> 。	WebView Android 51	Chrome Android 51	Firefox Android ?	Opera Android ?	Safari iOS 12.2 12.2 rootMargin does not work with <iframe> 。	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 ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	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

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• MutationObserver
• PerformanceObserver
• ResizeObserver

元数据

• 最后修改： May 4, 2020

相关话题

1. 交集观测器 API
2. IntersectionObserver
3. 构造函数

   1. IntersectionObserver()
4. 特性

   1. root
   2. rootMargin
   3. thresholds
5. 方法

   1. disconnect()
   2. observe()
   3. takeRecords()
   4. unobserve()
6. Related pages for Intersection Observer API

   1. IntersectionObserverEntry