IntersectionObserver

Posted 2021-09-14 GU-Moon

概述

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

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

用法

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

IntersectionObserverEntry对象参数解释

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

option对象属性解释

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