ResizeObserver: ResizeObserver() コンストラクター
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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);
仕様書
| 仕様書 |
|---|
| Resize Observer # dom-resizeobserver-resizeobserver |