IntersectionObserver 交叉观察者 -- 观察目标元素与可视区域的交叉区域

最新推荐文章于 2025-05-21 17:28:48 发布

原创

最新推荐文章于 2025-05-21 17:28:48 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了IntersectionObserver API，用于异步观察目标元素与可视区域的交集变化。通过创建新的IntersectionObserver实例，设置回调函数和选项，可以实现页面滚动时的动画效果、懒加载资源和埋点曝光等应用场景。

介绍
IntersectionObserver 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。

IntersectionObserver接收两个参数，分别是callback和options。options可选，有默认值。
const observer = new IntersectionObserver(callback[, options]);

基本使用

<div class="viewableArea">
  指定的可视区域

  <div class="target">被监听的目标元素</div>

  内容很多，都多到出现滚动条了。内容很多，都多到出现滚动条了。内容很多，都多到......
</div>

  const specifiedViewableArea = document.getElementsByClassName('viewableArea')[0];
  const target = document.getElementsByClassName('target')[0];

  const options = {
   
   
    // 指定可视区域
    root: specifiedViewableArea,
    // 给可视区域添加”虚拟“外边距
    rootMargin: '0px',
    // 当目标元素与指定可视区发生交叉，且目标元素出现在可视区的部分占目标元素的比例是0.33时，触发callback的调用。
    threshold: 0.33,
  };

  const callback = (entries: IntersectionObserverEntry[], observer?: IntersectionObserver) => {
   
   
    entries.forEach((entry) => {
   
   
      console.log('entry:', entry);