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

引言

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

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

可以看出上面几个场景共性：当样式需要自适应宽高，而脚本又需要按照元素宽高来执行某些操作时。这些场景使用 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 中包括以下五个属性：

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 来进行补全：

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

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

标签 , ,

发表回复