概述

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

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

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const option = {
	threshold: [0, 0.5, 1],
	root: document.querySelector('body'),
	rootMargin: "500px 0px"
};
const io = new IntersectionObserver(entries => {
	console.log(entries);
}, option)
// 开始观察
io.observe(element);

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect(element);

IntersectionObserverEntry对象参数解释

  • time：发生变化的时间
  • target：被观察的目标元素
  • rootBounds：根元素矩形区域的信息
  • boundingClientRect：目标元素矩形区域的信息
  • intersectionRect：目标元素与视口的交叉区域的信息
  • intersectionRatio：目标元素的可见比例完全可见时为1，完全不可见时小于等于0

option对象属性解释

  • threshold属性决定了什么时候触发回调函数
  • root 指定根容器