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