CSSで画面をスクロールさせないようにする方法！
CSSで画面がスクロールさせないようにする方法をサンプルコード付きで解説します。CSSのみでスクロールさせないようにする方法と、CSSとJSでより広くの端末でスクロール禁止にする方法を紹介します。
CSSで画面をスクロールさせないようにしたい
CSSでユーザーが画面をスクロールさせないようにしたい場合があります。
例えばモーダルlでコンテンツを前面に表示している間は、背面のコンテンツをスクロールできないようにするなどWEB開発ではこのケースが度々あります。
今回はCSSだけで画面がスクロールしないようにする方法と、更にCSSにJavaScriptの処理を加えてより広い端末に対応した形で画面をスクロール禁止にする方法をサンプルコード付きで解説します。
CSSで画面をスクロールさせないようにする方法
CSSで画面をスクロールさせないようにするには下記のCSSを記述するとスクロールさせないように（画面が固定に）出来ます。
スクロールさせないCSSの記述
html,body{
overflow: hidden
}このCSSの記述だけでデスクトップPCやAndroidのスマホなどはスクロールできないように出来ます。
一方でiOSでは上記の設定だけではスクロールできてしまうため、iOSに対してもスクロールを禁止にしたい方は下記のJSの処理を一緒に加える必要があります。
スマホのスクロールを禁止にするJavaScript
function disableScroll(event) {
event.preventDefault();
}
// イベントと関数を紐付け
document.addEventListener('touchmove', disableScroll, { passive: false });上記のCSSとJSを組み合わせてスクロール禁止にしたサンプルコードは下記の通りです。
上記サンプルコードのプレビューで「スクロール禁止」ボタンを押すとbody要素に.overflow-hiddenが付与され、CSSでスクロールが出来なくなります。
「スクロール禁止解除」のボタンを押すと.overflow-hiddenが削除され、再びスクロールできるようになります。
またスマホのtouchmoveイベントに対してevent.preventDefault();を返すことで、スマホのスクールも無効にしています。
