DOM – IntersectionObserver

介绍

IntersectionObserver 的作用是监听某个元素是否出现在框内 (比如 viewport).

它可以实现 lazy load image, 一开始图片是没有加载的, 当图片出现在 viewport 时才去加载.

也可以用来做 tracking, 比如某个商品 (card 元素), 是否出现在 viewport, 这样就可以检测用户是否看了某个商品.

效果

参考:

IntersectionObserver’s Coming into View

Medium – IntersectionObserver’s coming into view

Trust is good, observation is better: Intersection Observer v2 (v2, 但是目前只有 chrome 99 支持, 所以这篇先不介绍了)

getBoundingClientRect

参考: getBoundingClientRect() 详解

先了解一下 rect, 通过 getBoundingClientRect 可以得知一个元素, 对标 viewport 的位置坐标. 它不管 scroll bar 有点像 position fixed 对标 viewport.

x, y, width, height 是 detect 到的，其它的都是冗余：

top 就是 y

left 就是 x

right 就是 left + width

bottom 就是 top + height

另外，width height 会受到 scale 的影响哦。

在 IntersectionObserver 诞生以前, 要模拟它的效果就得监听 scroll 然后通过调用 getBoundingClientRect 来判断 2 个元素是否交会.

场景

先搭建一个简单的场景. 方便解释

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <div class="box">box5</div>
  <div class="box">box6</div>
  <div class="box">box7</div>
  <div class="box">box8</div>
  <div class="box">box9</div>
  <div class="box">box10</div>
</div>

1 个 container 包着 10 个 box

CSS Style

.container {
  margin-top: 100px;
  margin-inline: auto;
  width: fit-content;
  .box {
    border: 1px solid red;
    width: 100px;
    height: 100px;
  }
}

效果

new IntersectionObserver()

const io = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      console.log(entry);
    });
  },
  {
    root: document,
    rootMargin: "0px",
    threshold: [0],
  }
);

首先看看它的调用方式.

new 一个 IntersectionObserver 实例.

第 1 个参数是触发时的回调. 不关心这个先.

第 2 个参数是一个 config.

root 指的是框, 一旦观察元素出现在框内就会触发回调. 默认是 viewport 也就是 document, 也可以设置成任何一个 element (通常是 scrollable 的).

rootMargin 指的是 extra 的范围, 如同框变大了. 比如说, 不想等到 element 出现在框内了才触发, 想提早, 那可以写 rootMargin: 50% (也可以写 px, percentage 对应框的大小)

所以它会提早半个屏幕就触发. 一般上 lazy load 图片都会提早, 而不是等到用户已经看见 img element 了才去 load, 这样就慢掉了.

threshold 是一个元素显示多少 % 时要触发, 比如

threshold: [0.1, 0.5, 1], 观察元素是 box4

分别会在这 3 个阶段触发回调. 比较常用的方式是 [0, 1], 刚出现时触发一次, 完整出现时触发一次.

注意:

1. 如果被观察的元素 height 超过框的 height, 那意味着永远不会出现 100% 显示. 那么 1 就不出触发了.

2. 只要元素出现在框内就会触发 (哪怕 viewport 看不见), 看下面的例子:

root 是 container 框 (不是 viewport 哦), click button 会 scroll container. 当把 viewport 移开以后, 点击 button 依然触发了. 因为元素显示在 container 框了.

它不需要出现在 viewport 的框.

3. 不仅仅是 scroll 无论以何种方式出现在框内都会触发, 比如 transform translate 也会触发的.

observe, unobserve

observe

把框定义好以后, 就开始放入要观察的元素.

const box9 = document.querySelectorAll(".box")[8];
io.observe(box9);

注意:

1. 触发频率, 它不是立马触发的 (性能考量), 可能会有几毫秒的微差, 比如监听的是 0.5 (50% 显示), 但触发的时候是 0.52 (intersectionRatio).

2. observe 调用后, 不管元素是否出现在框内, 它都会触发第一次.

unobserve, disconnect

io.unobserve(box9)
io.disconnect()

不想监听了，可以调用 unobserve 把指定的元素监听去掉。

disconnect 并不会把 IntersectionObserver 整个关掉，它只是会把所以当前监听的元素 unobserve 而已。

没有 re-connect 的功能，我们也无法获取当前监听了的元素。

Callback Info

const io = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      console.log(entry);
      // entry.target;
      // entry.boundingClientRect;
      // entry.intersectionRect;
      // entry.isIntersecting;
      // entry.time;
      // entry.intersectionRatio;
      // entry.rootBounds
    });
  }
);

当元素显示时, 它就会触发 callback, entries 就是这一轮所有触发的 element (不是所有监听的 element 哦, 不关事的不会在 entries 里)

出于性能原因, 即使 element 是先后出现在框的, 但也可能被放到同一轮触发列表内.

target = 被观察的元素.

boundingClientRect = 被观察元素的 getBoundingClientRect(). (记得哦, getBoundingClientRect 一定是对标 viewport 的坐标, 所以这里是 target element 对标 viewport)

intersectionRatio = 多少 percentage 显示, 0.52 = 52% 显示在框内

isIntersecting = 元素是否显示

当 ratio = 0 的时候, 有可能是刚出现, 也可能是刚离开. 通过 isIntersecting 来判断.

rootBounds = 框 element 的 getBoundingClientRect(), (new IO 时的 root element 对标 viewport 坐标)

intersectionRect 

它和 boundingClientRect 差不多, 微差体现在:

区别在于它的 height 和 bottom, bottom 是冗余, 我们看 height 就好了.

100px 是整个 box9 的高, intersectionRect 是 41px, 因为 threshold 是 0.4, 40% 显示时触发.

所以 intersection 的 height 拿的不是完整的 box9 height, 而是已经显示的 box9 height. 所以就是大约 40px 了.

height 不同, bottom 自然也就不同了. 因为 bottom = y + height.

time = IO 有一个计时器, 从 new IO 后开始跑 start from 0ms.

每当触发的时候它就去截取当前的 time, 比如 5000 表示从 new IO 到这个元素触发已经过了 5 秒了. 它会一直跑, 不会 reset 的.

通过时间差就可以判断用户是否停留看着某个元素多久了. 具体的需求可能是, 想 tracking 某个 page section 用户是否游览. 但是那种一秒涮过的不算.

这时候就可以看 intersect in/out 的时间差, 来判断是否用户是慢慢划过的.

触发时机

处于性能考量，IntersectionObserver 触发的非常晚

window.setTimeout(() => {
  const h1 = document.querySelector('h1')!;
  h1.classList.add('showing');

  const io = new IntersectionObserver(() => {
    console.log('IntersectionObserver', performance.now());           // 3, 1106.3999999910593
    h1.classList.add('showed');
  });
  io.observe(h1);

  requestAnimationFrame(() => {
    console.log('first requestAnimationFrame', performance.now());    // 1, 1086.5999999940395
    requestAnimationFrame(() => {
      console.log('second requestAnimationFrame', performance.now()); // 2, 1105.0999999940395
    });
  });
}, 1000);

第一次 requestAnimationFrame 触发在 ui render 之前

第二次 requestAnimationFrame 触发在 ui render 之后

IntersectionObserver 比第二次 requestAnimationFrame 还要晚触发。