ResizeObserver

ResizeObserver 接口监视 Element内容盒或边框盒或者 SVGElement边界尺寸的变化。

构造函数

• ResizeObserver()

• 创建并返回一个新的 ResizeObserver 对象。

语法

new ResizeObserver(callback)

参数

• callback

  每当观测的元素调整大小时，调用该函数。该函数接收两个参数：

  • entries

    一个 ResizeObserverEntry 对象数组，可以用于获取每个元素改变后的新尺寸。

  • observer

    对 ResizeObserver 自身的引用，因此需要它的时候，你要从回调函数的内部访问。例如，这可用于在达到特定的情况时，自动取消对观察者的监听，但如果你不需要它，可以省略它。

方法

• ResizeObserver.disconnect()

  取消特定观察者目标上所有对 Element 的监听。

• ResizeObserver.observe()

  开始对指定 Element 的监听。

• ResizeObserver.unobserve()

  结束对指定 Element的监听。

示例

一个可拖拽的div和一个textarea。

.box {
  height: 200px;
  width: 200px;
  border: 1px solid #303030;
  overflow: hidden;
  resize: both;
  margin-bottom: 20px;
}

<div class="box">div</div>
<textarea id="text1" cols="30" rows="10">textarea</textarea>

const box = document.querySelector('.box');
const text1 = document.querySelector('#text1');
const resizeObserver = new ResizeObserver(entry => {
  console.log(entry);
});
resizeObserver.observe(box)
resizeObserver.observe(text1)

因为同时监听了box和text1，所以初次返回数组有两个元素，分别对应div和textarea。

后面拖动了textarea会触发回调，返回textarea对应的ResizeObserverEntry

可以在回调中添加操作，ResizeObserverEntry中也可以获取元素的尺寸数据。