通过ResizeObserver实时监听元素宽度变化

ResizeObserver

引自MDN

ResizeObserver 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。

浏览器方面几乎全面兼容

使用

初始化

使用ResizeObserver前需要先初始化，需要传入一个回调函数作为参数，在后续元素大小发生变化时触发。

初始化方法

const resizeOb = new ResizeObserver((events) => {

})

回调参数值
ResizeObserver接受的回调参数值是一个数组，数组的大小取决于监听了多少元素（也就是所有元素的变化都会体现在一个回调当中）。

回调中blockSize 和 inlineSize，这两个属性的值与页面元素的 writing-mode 相关，默认情况下 blockSize 为纵向尺寸一般是高度，inlineSize 为横向尺寸一般是宽度。当书写模式是纵向时，blockSize、inlineSize 的纵横向关系会互换。

type boxSize = {
    blockSize: number
    inlineSize: number
}

interface ResizeCallBackParams {
    borderBoxSize: boxSize // 边框盒子大小
    contentBoxSize: boxSize // 内容盒子大小
    contentRect: {  // 当前元素内容位置和大小
        bottom: number
        height: number
        left: number
        right: number
        top: number
        width: number
        x: number
        y: number
    }
    devicePixelContentBoxSize: boxSize // 以设备大小为单位的内容盒子大小
    target: Element // 触发事件的DOM元素
}

监听页面元素

resizeOb.observe(HTMLBodyElement)
resizeOb.observe(document.getElementById('content')， {
    box: 'content-box' // 观察选项 默认值 content-box 可选值 border-box、device-pixel-content-box
})

理解和使用场景

• 通过ResizeObserver我们可以通过JS实现类似于CSS媒体查询的能力。
• 提供了比window.onresize()更精细的（DOM元素）变化监听
• 通过ResizeObserver实现动态调整canvas、echarts等需要使用JS渲染图形的组件大小。
• 通过ResizeObserver实现类似于el-scrollbar的功能