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

/ 0评 / 0

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
})

理解和使用场景

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注