浅谈ResizeObserver

念念不忘必有回响

已于 2024-05-27 17:39:28 修改

阅读量815

点赞数 13

分类专栏： html5 文章标签： css 前端 css3 html5

于 2024-05-27 17:36:15 首次发布

本文链接：https://blog.csdn.net/m0_45093055/article/details/139243533

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概览

ResizeObserver 是一个 JavaScript API，用于异步观察 Element 或其他目标对象（如 SVG 元素或文本节点）的大小变化。当这些目标的大小变化时，ResizeObserver 将会触发一个回调函数，并将一组 ResizeObserverEntry 对象作为参数传递给该函数，这些对象描述了每个目标的大小变化。

这个 API 对于响应式设计、动态内容调整、布局优化等场景非常有用

一. 举个例子

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>ResizeObserver Example</title>  
<style>  
  #resizable-box {  
    width: 200px;  
    height: 200px;  
    background-color: lightblue;  
    resize: both; /* 允许用户调整元素大小 */  
    overflow: auto; /* 当内容溢出时显示滚动条 */  
    display: inline-block;  
    vertical-align: top;  
  }  
    
  #status-text {  
    margin-left: 20px;  
    display: inline-block;  
    vertical-align: top;  
  }  
</style>  
</head>  
<body>  
  
<div id="resizable-box"></div>  
<div id="status-text">Resize the box to see its current size.</div>  
  
<script>
  // 创建一个新的 ResizeObserver 实例，并传入一个回调函数  
const resizeObserver = new ResizeObserver((entries, observer) => {  
  // 假设我们只观察一个元素，所以直接取第一个 entry  
  const entry = entries[0];  
  const resizableBox = entry.target; // 获取被观察的元素  
  const statusText = document.getElementById('status-text'); // 获取用于显示状态的元素  
    
  // 更新状态文本以显示当前大小  
  statusText.textContent = `The box is now ${entry.contentRect.width}px wide and ${entry.contentRect.height}px tall.`;  
    
  // 根据大小改变状态文本的颜色（可选）  
  if (entry.contentRect.width > 300 || entry.contentRect.height > 300) {  
    statusText.style.color = 'red';  
  } else {  
    statusText.style.color = 'black';  
  }  
});  
  
// 选择要观察的元素  
const resizableBoxElement = document.getElementById('resizable-box');  
  
// 开始观察目标元素  
resizeObserver.observe(resizableBoxElement);
</script>  
  
</body>  
</html>

二. 重点解析

entry.contentRect和entry.target分别代表什么？

在ResizeObserver的回调函数中，entries参数是一个数组，其中包含了与这次观察相关的所有元素的信息。每个数组元素（通常被称为entry）都代表了被观察元素的一个“条目”或“记录”。

entry.contentRect 是一个DOMRectReadOnly对象，它提供了被观察元素的大小及其相对于视口的位置信息。它有以下属性：

x: 元素左边框到视口左边的距离。

y: 元素上边框到视口上边的距离。

width: 元素的布局宽度（包括内边距和边框，但不包括外边距、滚动条和伪元素）。

height: 元素的布局高度（包括内边距和边框，但不包括外边距、滚动条和伪元素）。

top: 等同于 y（元素上边框到视口上边的距离）。

right: 元素右边框到视口左边的距离（包括元素的宽度）。

bottom: 元素下边框到视口上边的距离（包括元素的高度）。

left: 元素左边框到视口左边的距离（等同于 x）。

entry.target 是一个指向被观察元素的引用。它是一个Element对象，代表了你通过ResizeObserver.observe()方法添加到观察列表中的DOM元素。你可以通过这个属性来访问和修改该元素的属性、样式或调用其方法。

综上所述，entry.contentRect提供了元素的大小和位置信息，而entry.target则直接引用了被观察的元素本身。

三. 总结

ResizeObserver的应用场景广泛，主要包括以下几个方面：

1. 响应式布局：
当网页布局需要根据容器大小变化而自适应时，可以使用ResizeObserver来监听容器元素的大小变化，并相应地调整布局和样式。
通过这种方式，可以确保元素在尺寸变化时能正确调整其内部样式和内容，为访问者提供更好的用户体验。
2. 数据可视化：
在使用如ChartJs等图表库创建图表时，可以结合ResizeObserver来实现图表的自适应大小。
当图表容器的大小发生变化时，ResizeObserver可以自动调整图表的大小和布局，以适应新的容器尺寸，保持图表的完整性和可读性。
3. 富文本编辑器：
在富文本编辑器中，内容的变化可能导致滚动条和布局的调整。
使用ResizeObserver可以实时观察这些变化，并相应地更新滚动条和布局，确保编辑器的流畅性和易用性。
4. 拖放功能：
在实现拖放功能时，拖动元素可能会改变目标区域的尺寸。
通过ResizeObserver，可以实时更新目标区域的尺寸，以适应拖动的元素，并触发相应的操作。
5. 图片和媒体元素的自适应：
当网页中包含图片、视频或其他媒体元素时，可以使用ResizeObserver来监听其容器元素的大小变化。
根据新的容器尺寸，ResizeObserver可以自动调整媒体元素的大小和布局，确保媒体元素在不同设备和屏幕尺寸下都能正确显示。
6. 自定义组件的集成：
对于开发者创建的自定义组件，ResizeObserver也可以发挥重要作用。
开发者可以将ResizeObserver集成到自定义组件中，以便在组件内监视子元素的大小变化，并据此执行相应的操作。

综上所述，ResizeObserver的应用场景涵盖了响应式布局、数据可视化、富文本编辑器、拖放功能、图片和媒体元素的自适应以及自定义组件的集成等多个方面。这些应用场景都体现了ResizeObserver在Web开发中对于元素尺寸变化的高效且可靠的监测能力。

念念不忘必有回响

关注

13
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
浅谈ResizeObserver

ResizeObserver的应用场景广泛，主要包括以下几个方面：响应式布局：当网页布局需要根据容器大小变化而自适应时，可以使用ResizeObserver来监听容器元素的大小变化，并相应地调整布局和样式。通过这种方式，可以确保元素在尺寸变化时能正确调整其内部样式和内容，为访问者提供更好的用户体验。数据可视化：在使用如ChartJs等图表库创建图表时，可以结合ResizeObserver来实现图表的自适应大小。
复制链接

扫一扫

专栏目录