# [`window.onresize`](https://developer.mozilla.org/docs/Web/API/Window/resize_event) でスクロールに惑わされない
```js
window.addEventListener("resize", _onresize);
```

ビューポートの幅や高さが変わったときに実行したい処理があったのですが、スクロール時にアドレスバー等が出入りして `resize` イベントが発生するブラウザもあります。残念なことに今回はその程度の変化で頻繫に実行したくない処理だったので、対策を取りました。

## [`document.onscroll`](https://developer.mozilla.org/docs/Web/API/Document/scroll_event)
スクロールされたときに実行されます。

```js
let documentIsScrolled = false;
window.addEventListener("scroll", () => documentIsScrolled = true);
window.addEventListener("scrollend", () => documentIsScrolled = false);
window.addEventListener("resize", event => {
    if (!documentIsScrolled) {
        _onresize(event);
    }
});
```

[スクロールが完了したときに発生する `scrollend` イベント](https://developer.mozilla.org/docs/Web/API/Document/scrollend_event)と組み合わせて、スクロールされていない間だけ処理を実行するようにしました。

## [`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver)
要素の寸法が変更されたときにコールバック関数を実行してくれます。

```js
const observer = new ResizeObserver(_callback);
for (const target of document.querySelectorAll(".target")) {
    observer.observe(target);
}
```
`resize` イベントを使っていた理由を振り返って、本当に検出したかったものを思い出しました。今回、本当に知りたかったことは特定の要素の寸法の変化でした。これは `resize` では難しかったので、`ResizeObserver` に乗り換え `resize` の利用をやめました。