监听dom元素大小变化

在JavaScript中，可以使用ResizeObserver来监听DOM元素的尺寸变化。

兼容性可参考：ResizeObserver - Web API 接口参考 | MDN

// 创建一个ResizeObserver实例
const ro= new ResizeObserver((entries, observer) => {
  // observer是对 ResizeObserver 自身的引用，因此需要它的时候，你要从回调函数的内部访问
  for (const entry of entries) {
    const { contentRect } = entry;
    console.log('Element resized:', contentRect);
  }
});
 
// 获取需要监听的DOM元素
const element = document.getElementById('myElement');
 
// 开始监听元素的尺寸变化
ro.observe(element);

如果担心兼容性可使用resize-observer-polyfill插件：

npm install resize-observer-polyfill --save-dev

用法和原生相同

import ResizeObserver from 'resize-observer-polyfill';
 
const ro = new ResizeObserver((entries, observer) => {
    // observer是对 ResizeObserver 自身的引用，因此需要它的时候，你要从回调函数的内部访问
    for (const entry of entries) {
      const { contentRect } = entry;
      console.log('Element resized:', contentRect);
    }
});

// 获取需要监听的DOM元素
const element = document.getElementById('myElement');

ro.observe(element);