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

10-11 163阅读 0评论

?=引言

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

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

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

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

使用

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

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 信息,同 getClientRecTStargetentry 所属的监听元素

borderBoxcontentBox 就是我们常说的 CSS模型中的 borderBoxcontentBoxentry 中的 borderBoxSizecontentBoxSize 中包含两个属性:blockSizeinlineSize,这两个属性的值与页面元素的 writing-mode 相关,默认情况下 blockSize 为纵向尺寸一般为高度,inlineSize 为横向尺寸一般为宽度。而当书写模式为纵向时,blockSizeinlineSize 的纵横向关系会调换。

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

其它 API

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

兼容与 polyfill

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

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

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

以上就是ResizeObserver 监视 DOM大小变化示例详解的详细内容,更多关于ResizeObserver 监视 DOM 的资料请关注云初冀北其它相关文章!

免责声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:Goliszhou@gmail.com
$

发表评论

表情:
评论列表 (暂无评论,163人围观)

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