ResizeObserver: ResizeObserver() コンストラクター
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.
ResizeObserver コンストラクターは新しい ResizeObserver オブジェクトを作成し、これを Element のコンテンツまたは境界ボックス、または SVGElement のバウンディングボックスに対する変更を報告するために使用することができます。
構文
js
new ResizeObserver(callback)
引数
callback-
監視中のものに寸法の変更が発生するたびに呼び出される関数です。この関数は 2 つの引数で呼び出されます。
entries-
ResizeObserverEntryオブジェクトの配列で、それぞれの変更の後で要素の新しい寸法にアクセスするために使用することができます。 observer-
ResizeObserver自身への参照で、必要に応じてコールバック内から確実にアクセスできます。これは、たとえば特定の条件に達したときにオブザーバーを自動的に監視解除するために使用できますが、必要ない場合は省略することができます。
コールバックは一般に、次のパターンに従います。
jsfunction callback(entries, observer) { for (const entry of entries) { // 各項目に何かをする // 場合によってはオブザーバー自体に何かをする } }
例
次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。
js
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentBoxSize) {
if (entry.contentBoxSize[0]) {
h1Elem.style.fontSize = `${Math.max(
1.5,
entry.contentBoxSize[0].inlineSize / 200,
)}rem`;
pElem.style.fontSize = `${Math.max(
1,
entry.contentBoxSize[0].inlineSize / 600,
)}rem`;
} else {
// legacy path
h1Elem.style.fontSize = `${Math.max(
1.5,
entry.contentBoxSize.inlineSize / 200,
)}rem`;
pElem.style.fontSize = `${Math.max(
1,
entry.contentBoxSize.inlineSize / 600,
)}rem`;
}
} else {
h1Elem.style.fontSize = `${Math.max(
1.5,
entry.contentRect.width / 200,
)}rem`;
pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
}
}
console.log("サイズが変更されました");
});
resizeObserver.observe(divElem);
仕様書
| Specification |
|---|
| Resize Observer # dom-resizeobserver-resizeobserver |
ブラウザーの互換性
Loading…