DOM – ResizeObserver

介绍

想监听一个 element 的 size changes 就可以使用 ResizeObserver 了.

在看这一篇之前, 建议先看看 DOM & BOM – IntersectionObserver, 它们的模式很像, 一起了解会比较容易.

效果

参考:

Youtube – Learn Resize Observer In 5 Minutes

场景

  <body>

    <button class="button">resize</button>

    <div class="box">resize me</div>

  </body>

CSS Style

.box {

  margin-top: 3rem;

  width: 100px;

  height: 100px;

  background-color: pink;

  border: 2px solid red;

  padding: 1rem;

}

new ResizeObserver()

const rs = new ResizeObserver((entries) => {

  console.log("entry", entries[0]);

});

rs.observe(document.querySelector(".box"));

document.querySelector(".button").addEventListener("click", () => {

  document.querySelector(".box").style.width = "400px";

});

调用, observe, unobserve 方式和 IntersectionObserver 是一样的.

new 实例 > observe > 当观察的元素 resize 就会触发回调. 不想观察了就 unobserve。

Callback Info

绿点是常用到的, 其它的就不介绍了

borderBoxSize, 它是 array 哦, 但我不知道什么时候会超过 1 个啦.

blockSize 就是 height, inlineSize 就是 width. 这个是 Logical Properties 的写法.

ContentBoxSize, 顾名思义它就是依据 box-sizing: content-box 的计算方式 (width 不包含 padding 和 border).

contentRect: 它的 width 和 height 是扣除了 padding, border 的, 至于 rect, 它并不是 boundingClientRect 哦, 具体是什么坐标我也没去研究, 以后有需求在来补上呗.

触发时机

ResizeObserver 会在 ui render 后触发，据说是在 layout 之后 paint 之前。

window.setTimeout(() => {

  const h1 = document.querySelector('h1')!;

  h1.classList.add('showing');

  const io = new ResizeObserver(() => {

    console.log('ResizeObserver', performance.now());           // 2, 1088.0999999940395

    h1.classList.add('showed');

  });

  io.observe(h1);

  requestAnimationFrame(() => {

    console.log('first requestAnimationFrame', performance.now());    // 1, 1083.7999999970198

    requestAnimationFrame(() => {

      console.log('second requestAnimationFrame', performance.now()); // 3, 1094.0999999940395

    });

  });

}, 1000);

第一次 requestAnimationFrame 触发在 ui render 之前

第二次 requestAnimationFrame 触发在 ui render 之后

ResizeObserver 在第一次 rAF 和第二次 rAF 中间触发。(注：ResizeObserver 和 IntersectionObserver 一样，observe 后会触发第一次)

另外一点，改了又改回去是不会触发 ResizeObserver 的

const box = document.querySelector(".box");

const ro = new ResizeObserver(() => console.log("resize"));

ro.observe(box);

window.setTimeout(() => {

   // 修改 dimension

   box.style.width = '100px';

   box.style.height = '100px';

   // 读取 dimension，这里会导致游览器提前 reflow

   console.log(box.offsetWidth); // 100

   // 修改回去

   box.style.width = 'auto';

   box.style.height = 'auto';

}, 2000);

ResizeObserver 不会触发，即便中间有一个 reflow 也不会。