526互联

js 浏览器的5种observer 第三种 ResizeObserver 详解及使用方法

发布时间 2023-09-12 18:54:52作者: 完美前端

 

ResizeObserver 它允许开发者监听元素的尺寸变化。 在前端开发中，元素尺寸的变化可能会受到许多因素的影响，例如窗口大小调整、设备方向变化、内部内容变化等。 提供了一种高效的方法来响应这些变化，而不需要频繁使用事件监听器或轮询技术。

1. 使用方法

const ro = new ResizeObserver(entries => {
    for (let entry of entries) {
        const { width, height } = entry.contentRect;
        console.log(`Element size: ${width} x ${height}`);
    }
});

// 开始监听目标元素
const targetElement = document.querySelector('.resize-me');
ro.observe(targetElement);

// 停止监听
// ro.unobserve(targetElement);

2. 监听多个元素

const targetElements = document.querySelectorAll('.resize-me');
targetElements.forEach(elem => {
    ro.observe(elem);
});

3. 应用场景

- **响应式布局**: 随着元素尺寸的变化，动态调整布局或样式。
- **动态容器**: 监听内容动态加载的容器的尺寸，以便进行布局调整。
- **Canvas 渲染**: 根据容器的尺寸变化，动态调整 canvas 的渲染尺寸或内容。
- **SVG 调整**: 动态调整 SVG 图形的尺寸或形状。

4. 浏览器兼容性

在现代浏览器中得到了广泛的支持，但老版本的浏览器可能不支持。为了解决这个问题，可以使用resize-observer-polyfill，这是一个为老版本浏览器提供 ResizeObserver 功能的 polyfill。
- Chrome 64+
- Firefox 69+
- Safari 13.1+
- Edge 79+
    
但是，总是建议开发者查阅最新的兼容性数据，例如可以访问 查看兼容 以获取最新的浏览器支持信息。

5. 结语

利用它，开发者可以更加轻松地处理和响应元素的尺寸变化，从而创建出更加流畅、响应迅速的用户体验。