Web API：ResizeObserver——监听元素大小的变化

• 前端

前言

最近突然发现了ResizeObserver 感觉挺有用的就简单学习了一下。

众所周知window.resize事件能帮我们监听窗口大小的变化。但是reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。

而ResizeObserver 可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距 padding。

参考：web API ResizeObserver

使用

兼容性

兼容性还是可以的，当然IE除外，毕竟微软自己都放弃了。

在这里插入图片描述

语法

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
  }
});

方法

ResizeObserver.disconnect()

取消和结束目标对象上所有对 Element或 SVGElement 观察。

ResizeObserver.observe()

开始观察指定的 Element或 SVGElement。

ResizeObserver.unobserve()

结束观察指定的Element或 SVGElement。

demo

    
        {{size}}
    



import { ref, onMounted } from 'vue';

const size = ref('');

onMounted(() => {
    size.value = '400 * 100';

    // 创建观察对象
    const resizeObserver = new ResizeObserver(entries => {
        // console.log(entries[0]);
        size.value = `${entries[0].contentRect.width} * ${entries[0].contentRect.height}`;
    });
    // 指定要观察的dom
    const test = document.getElementById('test');
    if (test) {
        resizeObserver.observe(test);
    }
});



.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
    resize: both;
}

注意：

css的resize 需要将overflow设置为hidden 才生效

效果

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/c59829147c.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐