Resize Observer API

概念與用法

有很多用例可以透過響應元素尺寸變化的響應式設計技術（以及其他方面）來實現，但以前的實現往往是 hacky 和/或脆弱的。

例如，媒體查詢 / window.matchMedia 非常適合在視口尺寸變化時在特定點更新佈局，但如果你想根據特定元素的尺寸變化來改變佈局，而不是外部容器呢？

要實現這一點，一個有限的解決方案是監聽可能暗示你感興趣的元素尺寸變化的事件（例如，視窗的 resize 事件），然後使用 Element.getBoundingClientRect 或 Window.getComputedStyle 等方法來確定元素在 resize 後的新尺寸或其他特徵。

這樣的解決方案往往只適用於有限的用例，對效能不利（持續呼叫上述方法會導致效能急劇下降），並且當瀏覽器視窗大小未改變時通常無效。

Resize Observer API 提供了針對這些問題（以及更多問題）的解決方案，它允許你以高效的方式輕鬆地觀察和響應元素內容或邊框盒尺寸的變化。它為 Web 平臺中經常討論的 元素查詢 的缺失提供了一個 JavaScript 解決方案。

使用方法很簡單，與 Performance Observer 或 Intersection Observer 等其他觀察者幾乎相同 — 你使用 ResizeObserver() 建構函式建立一個新的 ResizeObserver 物件，然後使用 ResizeObserver.observe() 來使其監視特定元素的尺寸變化。然後在建構函式中設定的回撥函式會在每次尺寸變化時執行，提供新尺寸的訪問許可權，並允許你根據這些變化執行任何你想要的操作。

介面

ResizeObserver

提供了註冊新觀察者以及開始和停止觀察元素的能力。

ResizeObserverEntry

描述了一個已調整大小的單個元素，標識了該元素及其新尺寸。

示例

你可以在我們的 GitHub 倉庫中找到幾個簡單的示例

• resize-observer-border-radius.html (檢視原始碼)：一個簡單的例子，有一個綠色的盒子，其尺寸是視口尺寸的百分比。當視口尺寸改變時，盒子的圓角會按盒子尺寸的比例變化。我們也可以直接使用百分比的 border-radius 來實現，但這很快會導致出現難看的橢圓形角，而上面的解決方案可以得到漂亮的圓角，並且會隨著盒子尺寸的變化而縮放。
• resize-observer-text.html (檢視原始碼)：在這裡，我們使用 resize observer 來改變標題和段落的 font-size，當滑塊的值改變導致包含的 <div> 寬度改變時。這表明你可以響應元素尺寸的變化，即使它們與視口無關。

程式碼通常會遵循這種模式（取自 resize-observer-border-radius.html）

const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

規範

瀏覽器相容性

另見

• ResizeObserver: 就像元素的 document.onresize