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

Posted on by

引言

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 的縱橫向關系會調換。

而 devicePixelContentBoxSize 則和設備像素比相關，在移動設備或是高分辨率屏幕中會與 CSS 像素存在差異。

其它 API

除瞭 observe 外，observer 還提供瞭 unobserve 來解除某個元素的監聽，或直接調用 disconnect 來關閉對所有元素的監聽。

兼容與 polyfill

ResizeObserver 的兼容性較差，一般情況下推薦需要使用 polyfill 來進行補全：

  • chrome 64
  • edge 79
  • firefox 69
  • safari 13.1
  • ie 不支持

常用的 polyfill：www.npmjs.com/package/res…

以上就是ResizeObserver 監視 DOM大小變化示例詳解的詳細內容，更多關於ResizeObserver 監視 DOM 的資料請關註WalkonNet其它相關文章！

推薦閱讀：