取代 window resize 事件? 如何使用 ResizeObserver 偵測元素變化

ResizeObserver 用來監控元素大小的變動，與 window 的 resize 事件(如下)的用途相似，通常用在監控瀏覽器視窗大小的變動。ResizeObserver 使用範圍更廣，可以綁在 HTMLElement 上。

window.addEventListener('resize', callback);

首先要建立一個 ResizeObserver 物件

const resizeObserver = new ResizeObserver(callback);

callback 是定義當指定的元素偵測到變化時，需要執行的動作，分為：

• entries：型態為陣列(array)。因為允許偵測多個變動元素，每個元素變動的大小、位置等資訊，會以 ResizeObserverEntry 物件裝在陣列內。
• observer：ResizeObserver 物件本身

const resizeObserver = new ResizeObserver((entries, observer) => {
    entries.forEach(entry => {
        // Do something to each entry
        // and possibly something to the observer itself
    });
});

再來，使用 oberve()開始監看元素

resizeObserver.observe(target, options);

target為需要偵測的元素

unobserve() 取消追蹤指定的元素

resizeObserver.unobserve(target);

可以使用disconnect()取消所有元素的追蹤

resizeObserver.disconnect();

接著，請參考 window resize 事件的範例，範例將視窗大小顯示，若resize發生時，將異動更新到畫面上，如果使用 ResizeObserver 要怎麼改寫：

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Body height: <span id="height"></span></p>
<p>Body width: <span id="width"></span></p>

const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');
  
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    heightOutput.textContent = entry.contentRect.height;
    widthOutput.textContent = entry.contentRect.width;
  });
});

resizeObserver.observe(document.querySelector('body'));

Resize the browser window to fire the resize event.

Body height:

Body width:

底下實作一個範例，用slider控制 div 區域的寬度，當增測的 div 變化時，依據寬度的數值改變 div 背景的透明度。

See the Pen ResizeObserver Example by chenuin (@chenuin) on CodePen.

參考資料: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver