网站首页> 前端开发> JavaScript> ResizeObserver 监视 DOM大小变化示例详解

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

时间:2022-10-11 16:53:36 阅读:239次 来源:互联网

引言

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 的引用。

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

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: https://www.npmjs.com/package/resize-observer-polyfill

本文地址:https://www.manongw.com/article/416.html

文章来源:转载于简书,转载网址为https://www.jianshu.com/p/1ed65b2e99f3

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了JS pushlet XMLAdapter适配器用法案例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:00
  • 本文主要介绍了JSON stringify方法原理及实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:11
  • 本文主要介绍了使用TS来编写express服务器的方法步骤的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-30 09:26
  • 本文主要介绍了详解JavaScript 高阶函数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:47
  • 本文主要介绍了详解webpack的clean-webpack-plugin插件报错的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:06
  • 本文主要介绍了JavaScript setTimeout()基本用法有哪些的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-04 22:05
  • 本文主要介绍了原生JS实现弹幕效果的简单操作指南的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:04
  • 本文主要介绍了JS实现简单贪吃蛇小游戏的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 08:59
  • 本文主要介绍了JavaScript实现串行请求的示例代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:25
  • 本文主要介绍了JavaScript 实现轮播图特效的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 16:59