如何使用ResizeObserver进行元素尺寸变化监听？

本文共计1042个文字，预计阅读时间需要5分钟。

目录 + 引用 + 使用 + entry + 其他API + 兼容与polyfill + 引用ResizeObserver + 用于监听元素大小变化，常用于监听自适应元素大小变化，引起宽高变化时需JS做特定处理

目录

• 引言
• 使用
• entry
• 其它 API
• 兼容与 polyfill

引言

ResizeObserver 用于监听元素的大小尺寸变化，常见用于监听自适应大小的元素变化引起的宽高变化时处理应宽高变化而需要 JS 做特定处理的场景。

说下我自己使用中遇到的三个场景：

• Tabs 组件的头部区域在超过宽度/高度时需要展示出超出滚动按钮
• 组件中存在超出隐藏的场景，如多个标签超出一行后将剩余标签进行压缩等
• Table 组件横向滚动如果存在某几列数据需要固定展示的情况下需要根据宽度来计算是否需要出现滚动条和滚动体室阴影

可以看出上面几个场景共性：当样式需要自适应宽高，而脚本又需要按照元素宽高来执行某些操作时。这些场景使用 ResizeObserver 就可以比较方便的进行处理。