ResizeObserver 監(jiān)視 DOM大小變化示例詳解

更新時間：2022年10月08日 17:18:10 作者：嘿嘿Z

這篇文章主要為大家介紹了ResizeObserver 監(jiān)視 DOM大小變化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

ResizeObserver 用于監(jiān)聽元素的大小尺寸變化，常見用于監(jiān)聽自適應(yīng)大小的元素變化引起的寬高變化時處理應(yīng)寬高變化而需要 JS 做特定處理的場景。

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

Tabs 組件的頭部區(qū)域在超過寬度/高度時需要展示出超出滾動按鈕
組件中存在超出隱藏的場景，如多個標(biāo)簽超出一行后將剩余標(biāo)簽進(jìn)行壓縮等
Table 組件橫向滾動如果存在某幾列數(shù)據(jù)需要固定展示的情況下需要根據(jù)寬度來計算是否需要出現(xiàn)滾動條和滾動體室陰影

可以看出上面幾個場景共性：當(dāng)樣式需要自適應(yīng)寬高，而腳本又需要按照元素寬高來執(zhí)行某些操作時。這些場景使用 ResizeObserver 就可以比較方便的進(jìn)行處理。

使用

使用 ResizeObserver 第一步同樣是先需要實(shí)例化一個 observer，第二步便是使用 observer 的 observe 將需要監(jiān)聽的元素添加到監(jiān)視列表中：

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

實(shí)例化時只需要接受一個參數(shù)：尺寸變化時的回調(diào)，回調(diào)函數(shù)中的 entries 則是所有添加到監(jiān)視列表中的元素的 entry 信息列表，而 observer 同樣是上面實(shí)例化的 observer 的引用。

Script

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

entry

entry 中包括以下五個屬性：

borderBoxSize：監(jiān)聽元素的 borderBox 尺寸
contentBoxSize：監(jiān)聽元素的 contentBox 尺寸
devicePixelContentBoxSize：監(jiān)聽元素的 contentBox 尺寸，不過是設(shè)備像素維度，而不是展示維度
contentRect：監(jiān)聽元素的 contentRect 信息，同 getClientRects
target： entry 所屬的監(jiān)聽元素

borderBox 和 contentBox 就是我們常說的 CSS 盒模型中的 borderBox 和 contentBox，entry 中的 borderBoxSize 和 contentBoxSize 中包含兩個屬性：blockSize 和 inlineSize，這兩個屬性的值與頁面元素的 writing-mode 相關(guān)，默認(rèn)情況下 blockSize 為縱向尺寸一般為高度，inlineSize 為橫向尺寸一般為寬度。而當(dāng)書寫模式為縱向時，blockSize、inlineSize 的縱橫向關(guān)系會調(diào)換。