跳到主要内容

如何监听DOM大小变化?

· 阅读需 1 分钟
Amber

onresize事件

使用window.on('resize', () => {})可以监听因为窗口变化,而发生的变化回调,但是对于Dom的的尺寸变化,却无法响应。

使用ResizeObserver尺寸变化

ResizeObserver API MDN

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

const observer = new ResizeObserver(entries => {
for (const entry of entries) {
console.log('handling box size changing')
}
});

observer.observe(window.document.querySelector('dom'));
observer.disconnect();