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

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

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

引言

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

說(shuō)下我自己使用中遇到的三個(gè)場(chǎng)景：

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

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

使用

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

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

實(shí)例化時(shí)只需要接受一個(gè)參數(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 中包括以下五個(gè)屬性：

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

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