ResizeObserver Polyfill的使用

JavaScript API——ResizeObserver 

ResizeObserver Polyfill的使用

https://blog.csdn.net/angel_rong/article/details/97377601

 

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的容器