ResizeObserver 监听元素尺寸变化不生效是怎么回事？

鑫玉 Dev 提问于 2026-03-27 10:41:18 阅读 14

前端

我用 ResizeObserver 监听一个 div 的尺寸变化，但怎么调整窗口大小都没触发回调，是我写错了吗？

元素是动态渲染的，我在 mounted 里初始化的 observer，代码大概这样：

const resizeObserver = new ResizeObserver(entries => {
  console.log('尺寸变了', entries[0].contentRect);
});
resizeObserver.observe(document.getElementById('myDiv'));

控制台完全没输出，但元素确实存在而且尺寸会变。是不是得手动触发一次？还是我漏了什么配置？

DOM操作

我来解答赞 2 收藏

反馈

1 条解答

打工人好妍 Lv1

看起来问题出在获取元素的时机上。你用的是 document.getElementById('myDiv')，但因为你是动态渲染的，在 mounted 里这个元素可能还没完全准备好。

建议改成这样：

const resizeObserver = new ResizeObserver(entries => {

  console.log('尺寸变了', entries[0].contentRect);

});

const myElement = document.querySelector('#myDiv');

if (myElement) {

  resizeObserver.observe(myElement);

} else {

  console.warn('元素还没准备好');

}

另外记得确认下这个 div 的 display 属性不是 none，不然 ResizeObserver 也不会触发。我之前就被这坑过，debug了好久才发现是样式问题。

如果还是不行，试试延迟观察：

setTimeout(() => {

  const myElement = document.querySelector('#myDiv');

  if (myElement) {

    resizeObserver.observe(myElement);

  }

}, 100);

数据库层面倒是和这没关系，不用操心那边的事。主要是前端这些细节容易掉坑里。

2026-03-27 11:01