ResizeObserver API

[bosens-China]

无意之间看到这个 API，发现这个 API 十分实用特来分享一下。

ResizeObserver 可以监听到 Element 的元素的变化，例如大小变化，在之前我们可能要监听 window 对象，因为 resize 定义在 window 上，不过注意这个 API 还是处于实验性阶段，在项目中要配合 polyfill 来使用

constructor

var ResizeObserver = new ResizeObserver(callback);

使用方法很简单，ResizeObserver 接收一个回调函数作为参数，当尺寸发生变化的时候 callback 函数接收一个 ResizeObserverEntry 数组，下面看一个例子

<div class="box"></div>
<script>
  const box = document.querySelector(".box");
  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      const dimensions = entry.contentRect;
      console.log(`${dimensions.width} x ${dimensions.height}`);
    }
  });
  resizeObserver.observe(box);
  setTimeout(() => {
    box.style.width = "99px";
  }, 1000);
</script>

上面定义了一个 box 的元素，并在一秒后更改宽度 ResizeObserver 可以监听到这一更改。

特别提醒一下，添加初始元素的时候默认就会执行执行一次回调，也就是说不用手动执行一次获取初始信息了。

ResizeObserverEntry

你可能好奇 ResizeObserverEntry 会返回什么格式的数据？
它由两部分组成

• target
  target 很好理解就是我们添加的元素

• contentRect
  contentRect 其实就是一个盒子信息，它的类型是 DOMRectReadOnly,有以下几个属性

  • bottom
    返回的底部坐标值（通常与 y + 高度相同）
  • height
    高度
  • width
    宽度
  • left
    返回的左坐标值（通常与 x 相同）
  • right
    返回的右坐标值（通常与 x + width 相同）
  • top
    返回的顶部坐标值（通常与 y 相同）
  • x
    原点的 x 坐标
  • y
    原点的 y 坐标

方法

observe

resizeObserver.observe(target);

上面的示例中也有用到这个方法，用于添加监听的元素，注意 target 的类型必须是 Element 或 SVGElement 引用。

disconnect

resizeObserver.disconnect();

停止和取消目标对象上所有对 Element 或 SVGElement 的监听。

unobserve

resizeObserver.unobserve(target);

接收一个参数，停止对指定目标的监听，target 的类型为 Element 或 SVGElement 引用