ResizeObserver监视元素大小变化，变化时观察者会收到通知

最新推荐文章于 2024-05-27 17:36:15 发布

Leo_1213

最新推荐文章于 2024-05-27 17:36:15 发布

阅读量248

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Leo_1213/article/details/134577402

版权

ResizeObserverAPI提供一种高性能机制，用于监听元素大小变化。开发者可以设置不同的盒模型选项，并在Vue3中优雅地处理组件卸载时的取消监听。适用于响应屏幕尺寸调整的布局需求。

摘要由CSDN通过智能技术生成

概要

Resize Observer API 提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

API

ResizeObserver

提供注册新观察者以及启动和停止观察元素的能力。

ResizeObserver() 创建并返回一个新的 ResizeObserver 对象
observe(targetElement, options) 开始对指定Element 监听
	options 可选
	一个可选的对象，允许你为监听的对象设置参数。目前，这只有一个参数：
	box
	设置 observer 将监听的盒模型。可能的值是：
	content-box（默认）
	CSS 中定义的内容区域的大小。
	border-box
	CSS 中定义的边框区域的大小。
	device-pixel-content-box
	在对元素或其祖先应用任何 CSS 转换之前，CSS 中定义的内容区域的大小，以设备像素为单位
unobserve() 结束对指定Element监听
disconnect() 取消所有对Element监听

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
  // 业务
  }
}
resizeObserver.observe(divElem)
取消监听应该写在页面卸载或销毁的回调方法里面
vue3:
onUnmounted(() => {
  resizeObserver.disconnect()
})

ResizeObserverEntry

描述已调整大小的单个元素，标识该元素及其新大小。

ResizeObserverEntry.borderBoxSize 只读
一个对象，当运行回调时，该对象包含着正在观察元素的新边框盒的大小。

ResizeObserverEntry.contentBoxSize 只读
一个对象，当运行回调时，该对象包含着正在观察元素的新内容盒的大小。

ResizeObserverEntry.devicePixelContentBoxSize 只读
一个对象，当运行回调时，该对象包含着正在观察元素的新内容盒的大小（以设备像素为单位）。

ResizeObserverEntry.contentRect 只读
一个对象，当运行回调时，该对象包含着正在观察元素新大小的 DOMRectReadOnly 对象。请注意，这比以上两个属性有着更好的支持，但是它是 Resize Observer API 早期实现遗留下来的，出于对浏览器的兼容性原因，仍然被保留在规范中，并且在未来的版本中可能被弃用。

ResizeObserverEntry.target 只读
对正在观察 Element 或 SVGElement 的引用。