DOM – ResizeObserver

介绍

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

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

 

效果

参考:

MDN – ResizeObserver

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 也不会。

 

posted @ 2022-03-11 19:38  兴杰  阅读(231)  评论(0)  编辑  收藏  举报