ResizeObserver 监视 DOM大小变化示例详解

目录
  • 引言
  • 使用
  • entry
  • 其它 API
  • 兼容与 polyfill

引言

ResizeObserver 用于监听元素的大小尺寸变化，常见用于监听自适应大小的元素变化引起的宽高变化时处理应宽高变化而需要 JS 做特定处理的场景。

说下我自己使用中遇到的三个场景：

  • Tabs 组件的头部区域在超过宽度/高度时需要展示出超出滚动按钮
  • 组件中存在超出隐藏的场景，如多个标签超出一行后将剩余标签进行压缩等
  • Table 组件横向滚动如果存在某几列数据需要固定展示的情况下需要根据宽度来计算是否需要出现滚动条和滚动体室阴影

可以看出上面几个场景共性：当样式需要自适应宽高，而脚本又需要按照元素宽高来执行某些操作时。这些场景使用 ResizeObserver 就可以比较方便的进行处理。

使用

使用 ResizeObserver 第一步同样是先需要实例化一个 observer，第二步便是使用 observer 的 observe 将需要监听的元素添加到监视列表中：

const observer = new ResizeObserver((entries, observer) => {
    entries.forEach(entry => {
        console.log(entry);
    });
});
observer.observe(target);

实例化时只需要接受一个参数：尺寸变化时的回调，回调函数中的 entries 则是所有添加到监视列表中的元素的 entry 信息列表，而 observer 同样是上面实例化的 observer 的引用。

Script

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(entry);
  })
})
observer.observe(document.getElementById('target'));

entry

entry 中包括以下五个属性：

  • borderBoxSize： 监听元素的 borderBox 尺寸
  • contentBoxSize： 监听元素的 contentBox 尺寸
  • devicePixelContentBoxSize： 监听元素的 contentBox 尺寸，不过是设备像素维度，而不是展示维度
  • contentRect： 监听元素的 contentRect 信息，同 getClientRects
  • target： entry 所属的监听元素

borderBox 和 contentBox 就是我们常说的 CSS 盒模型中的 borderBox 和 contentBox，entry 中的 borderBoxSize 和 contentBoxSize 中包含两个属性：blockSize 和 inlineSize，这两个属性的值与页面元素的 writing-mode 相关，默认情况下 blockSize 为纵向尺寸一般为高度，inlineSize 为横向尺寸一般为宽度。而当书写模式为纵向时，blockSize、inlineSize 的纵横向关系会调换。

而 devicePixelContentBoxSize 则和设备像素比相关，在移动设备或是高分辨率屏幕中会与 CSS 像素存在差异。

其它 API

除了 observe 外，observer 还提供了 unobserve 来解除某个元素的监听，或直接调用 disconnect 来关闭对所有元素的监听。

兼容与 polyfill

ResizeObserver 的兼容性较差，一般情况下推荐需要使用 polyfill 来进行补全：

  • chrome 64
  • edge 79
  • firefox 69
  • safari 13.1
  • ie 不支持

常用的 polyfill：www.npmjs.com/package/res…

以上就是ResizeObserver 监视 DOM大小变化示例详解的详细内容，更多关于ResizeObserver 监视 DOM 的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • ResizeObserver API使用示例详解

    ResizeObserver API使用示例详解

    目录 API介绍 浏览器兼容性 用法 总结 API介绍 当我们需要知道一个元素的大小变化或者屏幕横竖屏时,我们需要监听window.resize事件或者window.orientationchange方法.由于reize事件会在一秒内触发将近60次,所以很容易在改变窗口大小时导致性能问题.换句话说,window.resize事件通常是浪费的,因为它会监听每个元素的大小变化(只有window对象才有resize事件),而不是具体到某个元素的变化.如果我们只想监听某个元素的变化的话,这种操作就很浪费

  • JavaScript API ResizeObserver使用示例

    JavaScript API ResizeObserver使用示例

    目录 写在前面 API介绍 浏览器兼容性 用法 unobserve() disconnect() 写在前面 今天在看同事代码的时候看见这个API,出于好奇就去了解了一下. 这是一个实验中的功能 此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.——来自MDN的提醒 API介绍 众所周知window.resize事件能帮我们监听窗口大小的变化.但是reize事件会在一

  • ResizeObserver 监视 DOM大小变化示例详解

    ResizeObserver 监视 DOM大小变化示例详解

    目录 引言 使用 entry 其它 API 兼容与 polyfill 引言 ResizeObserver 用于监听元素的大小尺寸变化,常见用于监听自适应大小的元素变化引起的宽高变化时处理应宽高变化而需要 JS 做特定处理的场景. 说下我自己使用中遇到的三个场景: Tabs 组件的头部区域在超过宽度/高度时需要展示出超出滚动按钮 组件中存在超出隐藏的场景,如多个标签超出一行后将剩余标签进行压缩等 Table 组件横向滚动如果存在某几列数据需要固定展示的情况下需要根据宽度来计算是否需要出现滚动条和滚

  • Vue3组件更新中的DOM diff算法示例详解

    Vue3组件更新中的DOM diff算法示例详解

    目录 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 处理未知子序列 移动子节点 建立索引图 更新和移除旧节点 移动和挂载新节点 最长递增子序列 总结 总结 在vue的组件更新过程中,新子节点数组相对于旧子节点数组的变化,无非是通过更新.删除.添加和移动节点来完成,而核心 diff 算法,就是在已知旧子节点的 DOM 结构.vnode 和新子节点的 vnode 情况下,以较低的成本完成子节点的更新为目的,求解生成新子节点 DOM 的系列操作. 举例来说,假说我们有一个如下的列表 <ul>

  • Shell脚本实现监测文件变化的示例详解

    Shell脚本实现监测文件变化的示例详解

    目录 代码 使用方法 我最近在使用Linux的过程中遇到,遇到这样一个需求:监测某个文件的创建,变动.删除,并记录文件的每一个版本.我在网上没有找到合适的脚本或工具,然后我就自己写了一个shell脚本实现这个需求. 代码 完整的shell脚本如下,可以直接使用.本示例中,脚本文件名为fileTracer.sh. #!/bin/bash # ------------------------------------------ # Filename : fileTracer.sh # Version

  • javascrip高级前端开发常用的几个API示例详解

    目录 MutationObserver API 特点 IntersectionObserver API 举个例子 图片懒加载 无限滚动 getComputedStyle() API 与style的异同 getBoundingClientRect API 应用场景 1.获取 dom 元素相对于网页左上角定位的距离 2.判断元素是否在可视区域内 MutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口. 当 DOM 对象树发生任何变动时,Mutati

  • Python Flask实现图片上传与下载的示例详解

    Python Flask实现图片上传与下载的示例详解

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html 介绍 5.1 upload Jinja 模板介绍 5.2 upload css 介绍(虚线框) 5.3 upload js 介绍(拖拽) 1.效果预览 我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下: 2.新增逻辑概览 我们在官方指导工程上进行增加代码,改动如下: 由于 fl

  • Java数组的声明与创建示例详解

    今天在刷Java题的时候,写惯了C++发现忘记了Java数组的操作,遂把以前写的文章发出来温习一下. 首先,数组有几种创建方式? Java程序中的数组必须先进行初始化才可以使用,所谓初始化,就是为数组对象的元素分配内存空间,并为每个数组元素指定初始值,而在Java中,数组是静态的,数组一旦初始化,长度便已经确定,不能再随意更改. 声明数组变量 首先必须声明数组变量,才能在程序中使用数组.下面是声明数组变量的语法: dataType[] arrayRefVar; // 首选的方法 或 dataTy

  • C语言如何与ARM汇编语言混合编程示例详解

    C语言如何与ARM汇编语言混合编程示例详解

    目录 一.ARM汇编语言简介 二.C语言调用汇编语言 1.无参数调用 2.有参数调用 三.汇编语言调用C语言 四.总结 五.参考文献 主要使用软件:keiL μVision5 一.ARM汇编语言简介 什么是汇编语言?汇编语言是任何一种适用于电子计算机.微处理器或其他可编程器件的低级语言.虽然被称为"低级语言",但是并不是说汇编语言真的"低级".特定的汇编语言和特定的机器语言指令集是一一对应的,不同平台之间不可直接移植.汇编语言主要包括传送指令.逻辑运算.移位指令.位

  • Python深度学习实战PyQt5布局管理项目示例详解

    Python深度学习实战PyQt5布局管理项目示例详解

    目录 1. 从绝对定位到布局管理 1.1 什么是布局管理 1.2 Qt 中的布局管理方法 2. 水平布局(Horizontal Layout) 3. 垂直布局(Vertical Layout) 4. 栅格布局(Grid Layout) 5. 表格布局(Form Layout) 6. 嵌套布局 7. 容器布局 布局管理就是管理图形窗口中各个部件的位置和排列.图形窗口中的大量部件也需要通过布局管理,对部件进行整理分组.排列定位,才能使界面整齐有序.美观大方. 1. 从绝对定位到布局管理 1.1 什么

  • python opencv图像处理基本操作示例详解

    python opencv图像处理基本操作示例详解

    目录 1.图像基本操作 ①读取图像 ②显示图像 ③视频读取 ④图像截取 ⑤颜色通道提取及还原 ⑥边界填充 ⑦数值计算 ⑧图像融合 2.阈值与平滑处理 ①设定阈值并对图像处理 ②图像平滑-均值滤波 ③图像平滑-方框滤波 ④图像平滑-高斯滤波 ⑤图像平滑-中值滤波 3.图像的形态学处理 ①腐蚀操作 ②膨胀操作 ③开运算和闭运算 4.图像梯度处理 ①梯度运算 ②礼帽与黑帽 ③图像的梯度处理 5.边缘检测 ①Canny边缘检测 1.图像基本操作 ①读取图像 ②显示图像 该函数中,name是显示窗口的名字

  • Python深度学习线性代数示例详解

    Python深度学习线性代数示例详解

    目录 标量 向量 长度.维度和形状 矩阵 张量 张量算法的基本性质 降维 点积 矩阵-矩阵乘法 范数 标量 标量由普通小写字母表示(例如,x.y和z).我们用 R \mathbb{R} R表示所有(连续)实数标量的空间. 标量由只有一个元素的张量表示.下面代码,我们实例化了两个标量,并使用它们执行一些熟悉的算数运算,即加法.乘法.除法和指数. import torch x = torch.tensor([3.0]) y = torch.tensor([2.0]) x + y, x * y, x

随机推荐