ResizeObserver监听元素大小的变化

news2024/12/24 2:08:46

window.resize不适用于dom的监听。

ResizeObserver

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

方法

ResizeObserver.disconnect()
取消特定观察者目标上所有对 Element 的监听。

ResizeObserver.observe()
开始对指定 Element 的监听。

ResizeObserver.unobserve()
结束对指定 Element 的监听。

在页面挂载的时候进行某个dom的监听

const theResizeObserver = new ResizeObserver(this.handleResize);

theResizeObserver.observe(
  document.getElementsByClassName("leftSpanRightBoix")[0]
);

在页面销毁的时候取消监听

theResizeObserver.unobserve(
  document.getElementsByClassName("leftSpanRightBoix")[0]
);

// 该元素触发的回调函数

 handleResize = (dom) => {
 	// 我自己的处理逻辑
 	// ...
    const height = dom[0].contentRect.height;
    console.log(height, "aaa=========");
    if (height > 40) {
      !this.state.isShowLine &&
        this.setState({
          isShowLine: true,
        });
    } else {
      if (this.state.isShowLine !== false) {
        this.setState({
          isShowLine: false,
        });
      }
    }
  };

在这里插入图片描述
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/911638.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NLP预训练模型超大规模探索

总共从四方面来进行比较。 第一个方面,高层次方法(自监督的预训练方法)对比,总共三种方式。 语言模型式,就是 GPT-2 那种方式,从左到右预测;BERT-style 式,就是像 BERT 一样将一部…

通过几段代码,详解Python单线程、多线程、多进程

在使用爬虫爬取数据的时候,当需要爬取的数据量比较大,且急需很快获取到数据的时候,可以考虑将单线程的爬虫写成多线程的爬虫。下面来学习一些它的基础知识和代码编写方法。 一、进程和线程 进程可以理解为是正在运行的程序的实例。进程是拥…

卷积神经网络实现天气图像分类 - P3

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍦 参考文章:Pytorch实战 | 第P3周:彩色图片识别:天气识别🍖 原作者:K同学啊 | 接辅导、项目定制🚀 文章来源&#xff…

问道管理:中国十大科技板块?

跟着科技的开展,各种高科技工业在我国迅猛开展,其中十大板块就是一个比较典型的代表。这十大科技板块涵盖了从电子信息、生命健康到新材料等多个范畴,让我们一起来了解一下这十大板块的开展现状。 一、电子信息 作为国家重点支持开展的工业之…

剑指offer(C++)-JZ64:求1+2+3+...+n(算法-位运算)

作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 题目描述: 求123...n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句&…

如何使用数学将 NumPy 函数的性能提高 50%

一、说明 2D 傅里叶变换是本世纪最重要的计算机科学算法之一。它已在我们的日常生活中得到应用,从Instagram过滤器到MP3文件的处理。 普通用户最常用的实现,有时甚至是在不知不觉中,是 NumPy 的改编。然而,尽管它很受欢迎&#xf…

CDH集群离线配置python3环境,并安装pyhive、impyla、pyspark

背景: 项目需要对数仓千万级数据进行分析、算法建模。因数据安全,数据无法大批量导出,需在集群内进行分析建模,但CDH集群未安装python3 环境,需在无网情况下离线配置python3环境及一系列第三方库。 采取策略&#xf…

python分析实战(4)--获取某音热榜

1. 分析需求 打开某音热搜,选择需要获取的热榜如图 查找包含热搜内容的接口返回如图 将url地址保存 2. 开发 定义请求头 headers {Cookie: 自己的cookie,Accept: application/json, text/plain, */*,Accept-Encoding: gzip, deflate,Host: www.douyin.com,…

vue3+element下拉多选框组件

<!-- 下拉多选 --> <template><div class"select-checked"><el-select v-model"selected" :class"{ all: optionsAll, hidden: selectedOptions.data.length < 2 }" multipleplaceholder"请选择" :popper-app…

C++信息学奥赛1129:统计数字字符个数

这段代码的功能是计算一个输入字符串中的数字字符个数。 解析注释后的代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {string arr; // 定义字符串变量arr&#xff0c;用来存储输入的字符串getline(cin, arr); // 通过getline函数输入完…

企业文件透明加密软件——「天锐绿盾」数据防泄密管理软件系统

PC访问地址&#xff1a; 首页 一、文档透明加密软件 文档透明加密功能&#xff1a;在不影响单位内部员工对电脑任何正常操作的前提下&#xff0c;文档在复制、新建、修改时被系统强制自动加密。文档只能在单位内部电脑上正常使用&#xff0c;在外部电脑上使用是乱码或无法打…

前端通信(渲染、http、缓存、异步、跨域)自用笔记

SSR/CSR&#xff1a;HTML拼接&#xff1f;网页源码&#xff1f;SEO/交互性 SSR &#xff08;server side render&#xff09;服务端渲染&#xff0c;是指由服务侧&#xff08;server side&#xff09;完成页面的DOM结构拼接&#xff0c;然后发送到浏览器&#xff0c;为其绑定状…

Qt+C++串口调试接收发送数据曲线图

程序示例精选 QtC串口调试接收发送数据曲线图 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<QtC串口调试接收发送数据曲线图>>编写代码&#xff0c;代码整洁&#xff0c;规则&…

为何lazada、亚马逊、速卖通卖家都选择自养账号测评?

无论是做亚马逊还是shopee、Lazada、速卖通、wish、煤炉、拼多多Temu、敦煌网、eBay、Etsy、Newegg、美客多、Allegro、阿里国际、poshmark、沃尔玛、joom、OZON等平台。如果想要销量好&#xff0c;免不了进行补单测评的&#xff0c;因为不管对于哪一个平台的店铺新产品而言&am…

探工业互联网的下一站!腾讯云助力智造升级

引言 数字化浪潮正深刻影响着传统工业形态。作为第四次工业革命的重要基石&#xff0c;工业互联网凭借其独特的价值快速崛起&#xff0c;引领和推动着产业变革方向。面对数字化时代给产业带来的机遇与挑战&#xff0c;如何推动工业互联网的规模化落地&#xff0c;加速数字经济…

开利网络受邀参与御盛马术庄园发展专委会主题会议

近日&#xff0c;开利网络受邀参与深度合作客户御盛马术庄园组织的首届发展专委会主体会议&#xff0c;就马术庄园发展方向进行沟通&#xff0c;数字化也是重要议题之一。目前&#xff0c;御盛马术庄园已经完成数字化系统的初步搭建&#xff0c;将通过线上线下相结合的方式搭建…

编写接口文档示例:从零开始,轻松掌握关键技巧

接口文档的编写是软件开发中至关重要的一环&#xff0c;本文将详细介绍如何编写接口文档示例&#xff0c;为您揭示从基础知识到高级技巧的全过程。通过实用的指导和比喻&#xff0c;让您轻松掌握编写接口文档示例的艺术。 在现代软件开发中&#xff0c;编写接口文档示例是确保项…

Linux 上 离线部署GeoScene Server Py3 运行时环境

默认安装ArcGIS Pro的时候&#xff0c;会自动部署上Python3环境&#xff0c;所以在windows上不需要考虑这个问题&#xff0c;但是linux默认并不部署Py3&#xff0c;因此需要单独部署&#xff0c;具体部署可以参考Linux 上 ArcGIS Server 的 Python 3 运行时—ArcGIS Server | A…

PAT(Advanced Level) Practice(with python)——1067 Sort with Swap(0, i)

Code # 输入有毒&#xff0c;需避坑 # N int(input()) L list(map(int,input().split())) N L[0] L L[1:] res 0 for i in range(1,N):while L[0]!0:# 把所有不在正常位置下的数换到正常t L[0]L[0],L[t] L[t],L[0]res1if L[i]!i:# 换完全后如果对应位置下的数不是目标…

【校招VIP】测试专业课之TCP/IP模型

考点介绍&#xff1a; 大厂测试校招面试里经常会出现TCP/IP模型的考察&#xff0c;TCP/IP协议是网络基础知识&#xff0c;但是在校招面试中很多同学在基础回答中不到位&#xff0c;或者倒在引申问题里&#xff0c;就丢分了。 『测试专业课之TCP/IP模型』相关题目及解析内容可点…