ResizeObserver

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。(有关内容区域、内边距资料见盒子模型

ResizeObserver避免了在自身回调中调整大小,从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果(浏览器)遵循规范,只会在绘制前或布局后触发调用。

构造器

ResizeObserver()
创建并返回一个ResizeObserver对象。

属性

无。

Event handlers

无。

方法

ResizeObserver.disconnect()
取消和结束目标对象上所有对 ElementSVGElement 观察。
ResizeObserver.observe()
开始观察指定的 ElementSVGElement
ResizeObserver.unobserve()
结束观察指定的ElementSVGElement

示例

以下示例通过观察box的宽度变化从而改变其边框圆角半径。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

规范

Specification Status Comment
Resize Observer
ResizeObserver
Editor's Draft Initial definition.

浏览器兼容性

BCD tables only load in the browser

参考