ResizeObserver使用方法

冷不防 2023-10-10 20:10 9阅读 0赞

如何检测元素大小发生变化？

没有元素会无缘无故的发生变化，可能是窗口大小发生变化，我们可以监听window的resize事件；但很多情况是由于页面元素的变化（添加，删除）引起的，这种情况处理起来就比较麻烦了，大多数情况也是通过自定义事件来处理。

ResizeObserver提供了更直接的方法，直接监听元素的尺寸变化。

使用方式：

// 定义ResizeObserver对象，并设置监听方法
    const myObserver = new ResizeObserver(entries => {
      // handleResize(entries)
    })
    
    const contentEle = document.querySelector('.content')
    const staticEle = document.querySelector('p')
    
    // 添加要监听的元素
    myObserver.observe(staticEle)
    myObserver.observe(contentEle)

监听方法参数是一个数组，每个数组对象为大小发生变化的元素：

![9b0f62b1552afeed51ef4cffa68c4e17.png][]

由上图可以看到，每个对象都有`target`和`contentRect`属性，其中`contentRect`属性又包括`width`, `height`, `x`, `y`, `top`, `right`, `bottom`, `left`。这和`getBoundingClientRect`非常类似。

由于是比较新的方法，所以兼容性很差：![0bd31b7b0d8f45d38065f2b0d62e4879.png][]

[9b0f62b1552afeed51ef4cffa68c4e17.png]: https://img-blog.csdnimg.cn/img_convert/9b0f62b1552afeed51ef4cffa68c4e17.png
[0bd31b7b0d8f45d38065f2b0d62e4879.png]: https://img-blog.csdnimg.cn/0bd31b7b0d8f45d38065f2b0d62e4879.png

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关深入理解 ResizeObserver：优雅处理元素尺寸变化的现代方案

1.前言在前端开发中，我们经常需要监听元素尺寸的变化以做出相应的调整。传统的方法通常依赖于事件监听或者定时器轮询，但这些方法可能会带来性能问题或者不够精确。为了解决这些

青旅半醒/ 2024年02月05日 23:41/ 0 赞/ 5 阅读

相关 ResizeObserver使用方法

如何检测元素大小发生变化？没有元素会无缘无故的发生变化，可能是窗口大小发生变化，我们可以监听window的resize事件；但很多情况是由于页面元素的变化（添加，删除）引起

冷不防/ 2023年10月10日 20:10/ 0 赞/ 10 阅读

相关 RealTimeSync 使用方法

一、功能定期扫描某个文件夹并执行某个命令二、例子 ![f030e929cc23b5a0bb053f8da689f5dd.png][] [f030e929c

小灰灰/ 2022年11月15日 03:55/ 0 赞/ 665 阅读

相关 ResizeObserve 在 Echarts 的使用

前言前端图表经常要进行 resize 操作，一般我们会想到监听 window resize event，但是这个事件只能监听 window 窗口大小的改变，没有办法

小鱼儿/ 2022年09月16日 13:19/ 0 赞/ 272 阅读

相关 Leveldb使用方法

原文地址：[https://rawgit.com/google/leveldb/master/doc/index.html][https_rawgit.com_google_l

梦里梦外;/ 2022年08月18日 12:08/ 0 赞/ 233 阅读

相关 crontab使用方法

http://baike.baidu.com/view/1229061.htm?fr=aladdin 基本格式 : \　　\　　\　　\　　\　　command

淡淡的烟草味﹌/ 2022年08月10日 15:58/ 0 赞/ 230 阅读

相关方法listview使用

最近学习安卓，学了一段时间，感觉很乱，现在开始把每一个功能单独集合一下这篇博文介绍listview，完整代码很适合我这样的新手看， 1、首先是activity\_mai

桃扇骨/ 2022年06月17日 08:42/ 0 赞/ 221 阅读

相关 rTorrent使用方法

[Linux BT下载软件 — Rtorrent 配置使用][Linux BT_ _ Rtorrent] [rtorrent - 强大的命令行BT客户端][rtorrent

待我称王封你为后i/ 2022年06月10日 07:44/ 0 赞/ 370 阅读

相关 UriComponentsBuilder 使用方法

UriComponentsBuilder 是 Spring 提供的一个 UriComponents 类的构建类,通过他可以方便的构建我们请求的 url Maven包: <

电玩女神/ 2021年10月19日 23:40/ 0 赞/ 739 阅读

相关 PageHelper使用方法

第一步：先在pom.xml中添加如下 <properties> <pagehelper-version>5.0.0</pagehelper-versi

超、凢脫俗/ 2021年10月15日 01:29/ 0 赞/ 677 阅读