ResizeObserver 監視 DOM大小變化範例詳解

2022-10-12 14:01:47

引言

ResizeObserver 用於監聽元素的大小尺寸變化，常見用於監聽自適應大小的元素變化引起的寬高變化時處理應寬高變化而需要 JS 做特定處理的場景。

說下我自己使用中遇到的三個場景：

Tabs 元件的頭部區域在超過寬度/高度時需要展示出超出捲動按鈕
元件中存在超出隱藏的場景，如多個標籤超出一行後將剩餘標籤進行壓縮等
Table 元件橫向捲動如果存在某幾列資料需要固定展示的情況下需要根據寬度來計算是否需要出現卷軸和捲動體室陰影

可以看出上面幾個場景共性：當樣式需要自適應寬高，而指令碼又需要按照元素寬高來執行某些操作時。這些場景使用 ResizeObserver 就可以比較方便的進行處理。

使用

使用 ResizeObserver 第一步同樣是先需要範例化一個 observer，第二步便是使用 observer 的 observe 將需要監聽的元素新增到監視列表中：

const observer = new ResizeObserver((entries, observer) => {
    entries.forEach(entry => {
        console.log(entry);
    });
});
observer.observe(target);

範例化時只需要接受一個引數：尺寸變化時的回撥，回撥函數中的 entries 則是所有新增到監視列表中的元素的 entry 資訊列表，而 observer 同樣是上面範例化的 observer 的參照。

Script

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(entry);
  })
})
observer.observe(document.getElementById('target'));

entry

entry 中包括以下五個屬性：

borderBoxSize：監聽元素的 borderBox 尺寸
contentBoxSize：監聽元素的 contentBox 尺寸
devicePixelContentBoxSize：監聽元素的 contentBox 尺寸，不過是裝置畫素維度，而不是展示維度
contentRect：監聽元素的 contentRect 資訊，同 getClientRects
target： entry 所屬的監聽元素

borderBox 和 contentBox 就是我們常說的 CSS 盒模型中的 borderBox 和 contentBox，entry 中的 borderBoxSize 和 contentBoxSize 中包含兩個屬性：blockSize 和 inlineSize，這兩個屬性的值與頁面元素的 writing-mode 相關，預設情況下 blockSize 為縱向尺寸一般為高度，inlineSize 為橫向尺寸一般為寬度。而當書寫模式為縱向時，blockSize、inlineSize 的縱橫向關係會調換。