ResizeObserver API
无意之间看到这个 API,发现这个 API 十分实用特来分享一下。
ResizeObserver 可以监听到 Element 的元素的变化,例如大小变化,在之前我们可能要监听 window 对象,因为 resize 定义在 window 上,不过注意这个 API 还是处于实验性阶段,在项目中要配合 polyfill 来使用
constructor
var ResizeObserver = new ResizeObserver(callback);
使用方法很简单,ResizeObserver 接收一个回调函数作为参数,当尺寸发生变化的时候 callback
函数接收一个 ResizeObserverEntry
数组,下面看一个例子
<div class="box"></div>
<script>
const box = document.querySelector(".box");
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const dimensions = entry.contentRect;
console.log(`${dimensions.width} x ${dimensions.height}`);
}
});
resizeObserver.observe(box);
setTimeout(() => {
box.style.width = "99px";
}, 1000);
</script>
上面定义了一个 box 的元素,并在一秒后更改宽度 ResizeObserver
可以监听到这一更改。
特别提醒一下,添加初始元素的时候默认就会执行执行一次回调,也就是说不用手动执行一次获取初始信息了。
ResizeObserverEntry
你可能好奇 ResizeObserverEntry 会返回什么格式的数据? 它由两部分组成
-
target target 很好理解就是我们添加的元素
-
contentRect contentRect 其实就是一个盒子信息,它的类型是 DOMRectReadOnly,有以下几个属性
- bottom 返回的底部坐标值(通常与 y + 高度相同)
- height 高度
- width 宽度
- left 返回的左坐标值(通常与 x 相同)
- right 返回的右坐标值(通常与 x + width 相同)
- top 返回的顶部坐标值(通常与 y 相同)
- x 原点的 x 坐标
- y 原点的 y 坐标
方法
observe
resizeObserver.observe(target);
上面的示例中也有用到这个方法,用于添加监听的元素,注意 target 的类型必须是 Element 或 SVGElement 引用。
disconnect
resizeObserver.disconnect();
停止和取消目标对象上所有对 Element 或 SVGElement 的监听。
unobserve
resizeObserver.unobserve(target);
接收一个参数,停止对指定目标的监听,target 的类型为 Element 或 SVGElement 引用