IntersectionObserver

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
阅读 723
158 声望
3 粉丝
0 条评论
158 声望
3 粉丝
文章目录
宣传栏