ResizeObserver
要素のサイズ変更を監視し、変更された時に、callbackを発火させるAPI
主に、要素の width や height の変化をリアルタイムで検知するために使用される
使用例
code:javascript
// ResizeObserverの作成
const observer = new ResizeObserver((entries) => {
for (let entry of entries) {
console.log("サイズが変更されました:", entry.contentRect);
}
});
// 監視対象の指定
const targetNode = document.getElementById("target");
observer.observe(targetNode); // targetNodeが変更されると、↑で指定したcallbackが発火
observer.unobserve(targetNode)
特定の要素の監視を停止
observer.disconnect()
すべての監視を停止
display: none の変化を検出できる
CSS の影響を検知できる
ResizeObserverのユースケース
canvasやSVGのリサイズ対応