使用ResizeObserver对单个元素进行大小监听

最新推荐文章于 2024-08-02 09:31:45 发布

请针对我谢谢

最新推荐文章于 2024-08-02 09:31:45 发布

阅读量6.5k

点赞数 3

分类专栏： react 个人心得前端文章标签： reactjs typescript javascript

本文链接：https://blog.csdn.net/weixin_42833042/article/details/106924543

版权

本文介绍了如何使用ResizeObserver API监听元素的大小和位置变化。在React和TypeScript环境中，需要注意在适当的生命周期内使用，并在组件卸载时清理监听器。由于ResizeObserver在某些库中可能未被识别，可能需要自定义类型声明。为了优化性能，建议配合节流函数使用。

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

一、API介绍

`ResizeObserver`

这是一个能针对某个元素实行大小、位置变化监听的API，是一个类，它提供了一个观察器，该观察器将在每个 resize 事件上调用，目前chrome、safari、fireFox(pc)基本支持。

二、常规用法

const resizeOb= new ResizeObserver(entries => {
   
    for(const entry of entries) {
   
        console.log(entry)
    }
})
resizeOb.observe

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

请针对我谢谢

关注关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ResizeObserver的使用

m0_51431448的博客

02-05

885

这篇说下ResizeObserver API。ResizeObserver接口监视Element内容盒或边框盒或者SVGElement边界尺寸的变化。

【JS】详解浏览器的5 种Observer: Mutation、Intersection、Performance、Resize、Reporting

最新发布

余浩的博客

08-13

887

监听用户的交互行为，我们会用 addEventListener 来监听 click、mousedown、keydown、input 等事件，但对于元素的变化、performance 的记录、浏览器干预行为这些不是用户交互的事件就要用 XxxObserver 的 api 了。IntersectionObserver：监听元素可见性变化，常用来做元素显示的数据采集、图片的懒加载MutationObserver：监听元素属性和子节点变化，比如可以用来做去不掉的水印。

3 条评论您还未登录，请先登录后发表或查看评论

Web API：ResizeObserver——监听元素大小的变化

weixin_41897680的博客

08-20

8552

Web API：ResizeObserver——监听元素大小的变化

Vue3组合式函数（监听DOM尺寸 useResizeObserver）

Mr Dear的博客

08-02

1110

使用 ResizeObserver API 编写的 Vue3 通用组合式函数观察 DOM 元素尺寸变化，功能丰富，简单易用😁😁

浅谈ResizeObserver

m0_45093055的博客

05-27

1006

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

使用 ResizeObserver解决页面尺寸变动,echarts或地图等自适应的一种方法(监听特定DOM元素尺寸变化)

Summer_Uncle的博客

04-23

1564

项目中,页面做了响应式布局.大量使用了弹性布局,导致盒子没有固定的宽高,在菜单切换或者窗口缩放时,echarts或者地图元素就会出现扭曲,错版,填充不完全,溢出等问题.当通过监听window的resize事件时,难以精准捕捉目标容器,同时echarts的resize()方法并不一定达到效果。

监听页面元素大小改变

renyudouhui的博客

01-22

591

// @ts-ignore const resizeObserver = new ResizeObserver(ele => { console.log(ele.target.style) service.widget.height = ele[0].target.style.height; }) watch( () => service.widget.multiRow, (multiRow) => { ...

监听元素宽高变化---new ResizeObserver

weixin_63896561的博客

01-26

1044

因为 ResizeObserver是异步的，所以会暂时被放到异步任务队列中，等待同步执行完毕后，才回去执行异步函数。观察多个元素：你可以同时观察多个 DOM 元素，当这些元素的尺寸发生变化时，ResizeObserver 会在每个元素上触发。完全不兼容ie浏览器，主流浏览器只兼容高版本，基本上2018年以前的浏览器都不兼容，部分浏览器甚至2020年以前都不兼容。异步回调：ResizeObserver 的回调是异步执行的，这意味着它会在浏览器准备好更新时触发，而不会引发性能问题。用于监视元素的大小变化。

学会使用这10个有用的Web API，让你的开发效率瞬间提升10倍。

web前端开发

04-24

508

英文 |https://blog.bitsrc.io/10-useful-web-apis-for-2020-8e43905cbdc5翻译 | web前端开发（ID：web_qdkf)...

监听dom元素大小变化

weixin_38103152的博客

04-11

720

在JavaScript中，可以使用。来监听DOM元素的尺寸变化。

JavaScript监听一个DOM元素大小变化

10-15

主要介绍了JavaScript监听一个DOM元素大小变化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

resize-observer-polyfill:用于Resize Observer API的polyfill

05-08

ResizeObserver Polyfill 用于Resize Observer API的polyfill。实现是基于MutationObserver的，并且如果不支持第一个事件，则将Mutation Events作为回退，因此除非DOM更改，否则不会进行轮询。不修改观察到的元素。处理CSS过渡/动画，并可能观察由动态CSS伪类（例如:hover引起的更改。遵循和本机实现。缩小并压缩后大小为2.44 KiB 。（在IE10及更低版本中存在样式问题）。安装从NPM： npm install resize-observer-polyfill --save-dev 从凉亭：（将在下一个主要版本中删除） bower install resize-observer-polyfill --save-dev 浏览器支持 Polyfill已在以下浏览器中经过测试：注意

resize-observer-lite:具有ResizeObserver功能受限的ResizeObserver Polyfill

05-13

调整大小观察者精简版具有ResizeObserver功能受限的ResizeObserver Polyfill。

vue-response-components-使用ResizeObserver创建响应组件。-Vue.js开发

05-27

vue-response-components使用ResizeObserver创建响应组件。想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用ResizeObserver创建响应性组件。想法看看我在ITNEXT安装上的帖子npm install vue-response-components（可选）从“ vue”全局导入插件vue从“ vue-response-components”导入{VueResponsiveComponents} Vue.use（VueResponsiveComponents）它将添加响应组件和v-response指令，带有作用域插槽的“使用响应”组件

js 监听一个元素大小发生变化

CycleByle的博客

01-25

943

js 监听一个元素大小发生变化。

Resize Observer使用

判断一个点是否在闭合曲线内

05-09

4719

Resize Observer是一个新的JavaScript API，与Intersection Observer API、Mutation Observer等其他观察者API非常相似。它允许在尺寸发生变化时通知元素。基本用法使用Resize Observer非常简单，只需实例化一个新的ResizeObserver对象并传入一个回调函数，该函数接收观察到的条目 const.........

监听DIV元素尺寸变化

Jeff的博客

08-18

6129

web开发过程中为了更好的实现元素自适应效果，往往需要监听DIV的尺寸变化。而DIV元素不像window对象，是没有resize事件的，我们无法直接监听DIV的resize事件。因此在需要对DIV元素进行监听时，需要采用一些特定方法完成size的监听。...

Android 对单个页面 uimode 设置监听

07-13

在 Android 中，你可以使用 `UiModeManager` 类来监听系统的 UI 模式变化。下面是一个示例代码，演示如何设置监听单个页面的 UI 模式变化：首先，在你的页面的 `onCreate()` 方法中获取 `UiModeManager` 的实例： ...