ResizeObserver监听浏览器宽高及元素宽高变化

最新推荐文章于 2024-08-06 17:44:12 发布

♂♀放纸鸢

最新推荐文章于 2024-08-06 17:44:12 发布

阅读量1.3k

点赞数

文章标签：前端 css3 javascript

本文链接：https://blog.csdn.net/qq407949480/article/details/122220589

版权

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型）

ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

angular2版本的使用

……
private ro: ResizeObserver | null = null;
……
ngAfterViewInit(): void{
    const targetElement = dialogElement.querySelector('#target');
    this.ro = new ResizeObserver((entries, observer) => {
        if (!!targetElement) {
            let height = window.innerHeight - 60;
            this.dialogHeight = height;
            if (height > 680) {
                height = 680;
            }
            const innerHeight = height + 'px';
            const marginTop = '-' + height / 2 + 'px';
            this.render.setStyle(targetElement, 'height', innerHeight);
            this.render.setStyle(targetElement, 'margin-top', marginTop);
        }
    })
    // 监听浏览器窗口的变化，可以为其它元素
    this.ro.observe(document.body);
}

ngOnDestroy(): void { 
    this.ro.unobserve();
}

这个东西在angular7下好像有个bug，当浏览器高度缩放可以，然后再放大，目标元素targetElement不会随着窗口的变大而变大，宽度调整是没问题，最后还是选择了用window.addEventListener('resize', () => {});

参考：ResizeObserver - Web API 接口参考 | MDN