ResizeObserver监听元素大小的变化

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决Fastjson2 oom(Out Of Memory),支持大对象(LargeObject 1G)json操作

在使用Fastjson中的 JSON.toJSONString时,如果对象数据太大(>64M)会出现Out Of Memory,查看源码发现为JSONWriter中的判断代码 其中maxArraySize默认最大为64M,如果超过了就会抛出oom错误 如果fastjson过多的使用内存,也可能导致java堆内存溢出,所以这…

开源语音聊天软件Mumble

网友 大气 告诉我,Openblocks在国内还有个版本叫 码匠,更贴合国内软件开发的需求,如接入了国内常用的身份认证,接入了国内的数据库和云服务,也对小程序、企微 sdk 等场景做了适配。 在 https://majiang.co/docs/docke…

idea 本地版本控制 local history

idea 本地版本控制 local history 如何打开 1 自定义快捷键 settings->keymap->搜索框输入 show history -》Add Keyboard Shortcut -》设置为 CtrlAltL 2 右键文件-》local history -》show history 新建文件 版本1,creating class com.geekmice…这个是初…

Vue前端封装一个任务条的组件进行使用

任务条 样式 代码 父组件 <articleSteps :tabs"tabs" :tabs-active-name"tabsActiveName" /><div class"drawer__footer"><el-button v-if"tabsActiveName 1 || tabsActiveName 2" click"backClick">…

视频云存储/安防监控/视频汇聚EasyCVR平台新增设备经纬度选取

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

vue浏览器插件安装-各种问题

方法1&#xff1a;vue.js devtolls插件下载 https://blog.csdn.net/qq_55640378/article/details/131553642 下载地址&#xff1a; Tags vuejs/devtools GitHub npm install 或是 cnpm install 遇到的报错 设置淘宝镜像源&#xff08;推荐使用nrm&#xff0c;这一步是为…

带你了解—在外远程群晖NAS-群晖Drive挂载电脑磁盘同步备份【无需公网IP】

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

Swift 周报 第三十五期

文章目录 前言新闻和社区五天市值蒸发 2000 亿美元&#xff0c;苹果公司怎么了&#xff1f;在你的 App 中帮助顾客解决账单问题需要声明原因的 API 列表现已推出 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组整理周报的第三十五…

通达信指标公式15:除权除息数据统计分析

#1.关于除权除息指标的介绍&#xff1a;本指标是小红牛原创指标之一&#xff0c;觉得有必要研究一下这个问题&#xff0c;所以就花时间整理一下这个指标相关内容&#xff0c;大家可以在本源码基础上&#xff0c;进一步优化自己的思路。本指标为通达信幅图指标&#xff0c;可以做…

树结构使用实例---实现数组和树结构的转换

文章目录 一、为什么要用树结构&#xff1f;二、使用步骤 1.引入相关json2.树结构的转换总结 一、为什么要用树结构&#xff1f; 本文将讲述一个实例&#xff0c;构造一棵树来实现数组和tree的转换&#xff0c;这在前端树结构中是经常遇到的 后端返回树结构方便管理&#xff…

轻松实现24小时无人直播带货,只需一款无人值守手机直播软件!

现在做线上运营&#xff0c;基本上就离不开短视频平台&#xff0c;想要做好短视频平台&#xff0c;就得弄懂如何在平台上进行直播。 今年以来&#xff0c;以专帮科技为首的一些科技公司研发的手机无人直播技术得到了快速发展&#xff0c;使得越来越多的企业和个人开始使用此类…

前端---需要了解浏览器相关知识--浏览器请求服务器资源---缓存

知识点1: 掘金1&#xff1a;浏览器缓存 掘金2 :浏览器缓存 一、浏览器缓存 请求&#xff08;静态资源 &#xff5c; 动态资源&#xff09; 一、缓存是什么&#xff1f; 如果没有缓存的机制 每次都要重新请求静态资源 1.从网络上的下载时间&#xff0c;肯定大于从硬盘里读的…

Pika Labs - 用AI工具生成短视频大片

今天我要跟大家分享如何用AI工具1分钟内生成一个短视频大片&#xff0c;效果完全不输影视大V。 只需要用一句话就可以生成视频&#xff0c;或者用一张图就能生成视频&#xff0c;这就是最新推出的AI工具Pika Labs&#xff01;被网友誉为“全球最优秀的文本生成视频AI”。 目前…

在思科(Cisco)设备上配置 DHCP 服务器

DHCP广泛用于LAN环境中&#xff0c;从集中式服务器动态分配主机IP地址&#xff0c;从而显着减少IP地址管理的开销。DHCP 还有助于节省有限的 IP 地址空间&#xff0c;因为不再需要将 IP 地址永久分配给主机&#xff0c;只有连接到网络的主机才会使用 IP 地址。DHCP 服务器将路由…

JSON的处理

1、JSON JSON(JavaScript Object Notation)&#xff1a;是一种轻量级的数据交换格式。 它是基于 ECMAScript 规范的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写&#…

VR漫游:720度实景参观,打造魅力生态小区

随着城市的不断发展&#xff0c;小区的建设越发具有生态化、绿色化的特点&#xff0c;人们也会偏向选择更加适合居住的小区。为了让更多的用户体验小区的舒适性&#xff0c;不少地产开发商准备引入VR漫游技术。 VR漫游不仅能够真实地展示现场环境&#xff0c;还可以改变传统网络…

问道管理:沪指失守3100点 机构判断“市场底”渐行渐近

8月21日&#xff0c;沪深两市股指盘中全线走低&#xff0c;三大股指收盘均跌超1%&#xff0c;其间沪指收盘指数今年以来初次失守3100点&#xff0c;创业板指更是3年多来初次跌破2100点。截至收盘&#xff0c;沪指跌1.24%报3092.98点&#xff0c;深证成指跌1.32%报10320.39点&am…

k8s v1.27.4 部署metrics-serverv:0.6.4,kube-prometheus

只有一个问题&#xff0c;原来的httpGet存活、就绪检测一直不通过&#xff0c;于是改为tcpSocket后pod正常。 wget https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml修改后的yaml文件&#xff0c;镜像修改为阿里云 apiVersion: …

Fedora Linux 的家族(三):实验室

导读本文将对 Fedora Linux 实验室版本进行更详细的介绍。 根据个人需求&#xff0c;每个人使用计算机的方式都不同。你可能是一位设计师&#xff0c;需要在计算机上安装各种设计软件。或者你可能是一位游戏玩家&#xff0c;所以需要一个支持你喜欢的游戏的操作系统。有时候我们…

【C++入门到精通】C++入门 —— priority_queue(STL)优先队列

阅读导航 前言一、priority_queue简介1. 概念2. 特点 二、priority_queue使用1. 基本操作2. 底层结构 三、priority_queue模拟实现⭕ C代码⭕priority_queue中的仿函数 总结温馨提示 前言 ⭕文章绑定了VS平台下std::priority_queue的源码&#xff0c;大家可以下载了解一下&…