ResizeObserver Polyfill 的的的的使用使用……

最新推荐文章于 2025-06-19 14:42:45 发布

八喜猫

最新推荐文章于 2025-06-19 14:42:45 发布

阅读量1w

点赞数 4

分类专栏：前端组件文章标签： MutationObserver DOMSubtreeModified

前端组件专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用Resize Observer Polyfill库实现实时响应Header高度变化的Drawer布局。通过安装并导入该库，可以监听DOM元素大小变化，自动调整Drawer位置，确保其始终紧贴Header下方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo效果：https://que-etc.github.io/resize-observer-polyfill/

github地址: https://github.com/que-etc/resize-observer-polyfill

我使用的场景，Header所在div发生高度变化，那么弹出的Drawer需要根据Header的高度吸附在其下方。

安装很简单：npm install resize-observer-polyfill --save-dev

官方示例使用方法：

import ResizeObserver from 'resize-observer-polyfill';

const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
        const {left, top, width, height} = entry.contentRect;

        console.log('Element:', entry.target);
        console.log(`Element's size: ${ width }px x ${ height }px`);
        console.log(`Element's paddings: ${ top }px ; ${ left }px`);
        //在此处做你要做的事情，例如我得到了header的自身的高度，然后设置Drawer的margin-top为这个高度，那么，无论header如果变化，我的drawer都会紧紧吸附于header了

    }
});

ro.observe(document.body); //这里是你观察的对象，官方例子观察body，我观察的是header的容器