js 一分钟熟悉ResizeObserver用法_js polyfill resizeobserver-CSDN博客

本文链接：https://blog.csdn.net/ivan5277/article/details/142585964

ResizeObserver 是一个 JavaScript API，它允许你在不使用轮询（即定时器或请求动画帧）的情况下监听元素尺寸的变化。这对于实现高效的布局更新或者响应式设计非常有用。下面是一个基本的 ResizeObserver 使用示例：

基本用法

创建一个 ResizeObserver 实例：传递一个回调函数作为构造函数参数，这个函数会在每次观察的元素大小变化时被调用。
开始监听元素：通过 observe() 方法将想要监听其大小变化的 DOM 元素传入。
停止监听元素：使用 unobserve() 方法来停止监听特定的元素，或者使用 disconnect() 方法来完全断开所有监听。

下面是一个简单的例子：

// 创建一个 ResizeObserver 实例，并提供一个处理大小变化的回调函数
const ro = new ResizeObserver((entries, observer) => {
    for (let entry of entries) {
        console.log(`Width: ${entry.contentRect.width}, Height: ${entry.contentRect.height}`);
    }
});

// 开始监听目标元素的大小变化
ro.observe(document.querySelector('#someElement'));

// 在某个时刻停止监听
ro.unobserve(document.querySelector('#someElement'));

// 或者完全断开 ResizeObserver
ro.disconnect();

监听多个元素

你可以使用一个循环来监听多个元素：

const elements = document.querySelectorAll('.some-class');

elements.forEach(element => {
    ro.observe(element);
});

获取元素尺寸信息

在回调函数中，entries 数组包含了 ResizeObserverEntry 对象，每个对象代表了一个被观察的元素。contentRect 属性提供了关于元素大小的信息，如宽度、高度等。

注意事项

ResizeObserver 可能对性能有影响，尤其是在监视大量元素时。因此，在不再需要监听时及时调用 unobserve 或 disconnect 方法是必要的。
当页面不可见（例如，标签页不在活动窗口中）时，ResizeObserver 不会触发回调。
支持情况：ResizeObserver 在现代浏览器中有很好的支持，包括 Chrome、Firefox、Safari 和 Edge。但是，对于一些旧版本的浏览器，可能需要 polyfill 来兼容。

希望这对你有所帮助！如果你有任何更具体的问题或需要进一步的帮助，请随时告诉我。