この記事は、ラクスパートナーズ AdventCalendar 2025の2日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）
経緯
あるプロジェクトでチームメンバーの方に
「ダイアログ表示中は背後のページが動かない（スクロールしない）ようにしてほしい」
という要望を受けました。
PCで操作した際は気にならなかったのですが、モバイル端末でダイアログを操作すると、背後にあるページまでスクロールされてしまう状態となっていました。これではユーザーにストレスが溜まりそうです。
調べたところ、bodyやhtmlにoverflow: hiddenを適用するとスクロールできなくなることを知ったので、そのやり方をメモしていきます。
実装方法
const openDialog = () => {
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden'
}
やり方は簡単です。
上記のようにJavaScript側でdocumentElementとbodyに対してoverflow: hiddenを適用するだけです。
documentElementはdocumentのルート要素を返却するプロパティで、ここでは<html>を返却します（以下MDNから引用）。
documentElement は Document インターフェイスの読み取り専用プロパティで、 document のルート要素である Element を返します（例えば、HTML 文書の場合は 要素）。
空ではない HTML 文章の場合、 documentElement は常に 要素を返します。空ではない XML 文章の場合、 documentElement は常に文章のルート要素である何らかの要素を返します。
https://developer.mozilla.org/ja/docs/Web/API/Document/documentElement
スクロール禁止を解除したい場合は、overflowに空の値を指定します。
const closeDialog = () => {
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
}
小ネタですが、Web開発をする上でダイアログの実装は避けられないと思うので、覚えておいて損はないテクニックだと思います。
以上、どなたかの参考になれば嬉しいです。