认识

2023年03月14日

柏拉文

越努力，越幸运

一、认识

---

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement 的边界框改变。内容区域则需要减去内边距 padding。ResizeObserver 避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理 DOM 中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

二、兼容

---

ResizeObserver 目前兼容绝大部分浏览器, 为了保准起见, 可以在项目中引用 resize-observer-polyfill , 来兼容。resize-observer-polyfill 语法如下:

1. 安装 resize-observer-polyfill

npm install resize-observer-polyfill --save-dev

2. 使用 resize-observer-polyfill

import ResizeObserver from 'resize-observer-polyfill';

const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
        const {left, top, width, height} = entry.contentRect;

        console.log('Element:', entry.target);
        console.log(`Element's size: ${ width }px x ${ height }px`);
        console.log(`Element's paddings: ${ top }px ; ${ left }px`);
    }
});

ro.observe(document.body);

三、构造函数

---

3.1 ResizeObserver()

ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。

语法

const resizeObserver = new ResizeObserver(callback)

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

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

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

返回值

一个新的 ResizeObserver 对象

回调函数

function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

四、实例方法

---

4.1 resizeObserver.disconnect()

resizeObserver.disconnect() 方法取消所有的对 Element 或 SVGElement 目标的监听。

语法

resizeObserver.disconnect()

4.2 resizeObserver.observe()

resizeObserver.observe() 方法用于监听指定的 Element 或 SVGElement。

语法

resizeObserver.observe(target)

resizeObserver.observe(target, options)

• target: 对要监听的 Element 或 SVGElement 的引用。

• options : 一个可选的对象，允许你为监听的对象设置参数。目前，这只有一个参数:

  • box: 设置 observer 将监听的盒模型。可能的值是:

    • content-box（默认）: CSS 中定义的内容区域的大小。

    • border-box: CSS 中定义的边框区域的大小。

    • device-pixel-content-box: 在对元素或其祖先应用任何 CSS 转换之前，CSS 中定义的内容区域的大小，以设备像素为单位。

4.3 resizeObserver.unobserve()

resizeObserver.unobserve() 结束对指定的 Element 或 SVGElement 的监听。

语法

resizeObserver.unobserve(target)

• target: 对不要监听的 Element 或 SVGElement 的引用。