CSSで画面をスクロールさせないようにする方法!

CSSで画面がスクロールさせないようにする方法をサンプルコード付きで解説します。CSSのみでスクロールさせないようにする方法と、CSSとJSでより広くの端末でスクロール禁止にする方法を紹介します。

コンテンツ [表示]

  1. 1CSSで画面をスクロールさせないようにしたい
  2. 2CSSで画面をスクロールさせないようにする方法

CSSで画面をスクロールさせないようにしたい

CSSでユーザーが画面をスクロールさせないようにしたい場合があります。

例えばモーダルlでコンテンツを前面に表示している間は、背面のコンテンツをスクロールできないようにするなどWEB開発ではこのケースが度々あります。

今回はCSSだけで画面がスクロールしないようにする方法と、更にCSSにJavaScriptの処理を加えてより広い端末に対応した形で画面をスクロール禁止にする方法をサンプルコード付きで解説します。

Photo byPexels

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();を返すことで、スマホのスクールも無効にしています。

あわせて読みたい
JavaScriptでスクロール禁止にする方法を解説!のイメージ
JavaScriptでスクロール禁止にする方法を解説!
JavaScriptでスクロール禁止にする方法についてサンプルコード付きで解説します。PCとスマホの両方に対応したスクロールさせない方法を紹介します。
あわせて読みたい
JavaScriptのclassListでクラスの追加・削除・判定方法!のイメージ
JavaScriptのclassListでクラスの追加・削除・判定方法!
JavaScriptのclassListでは該当要素のクラス名の取得・追加・更新・削除を行うことが出来ます。classListの使い方についてサンプルコード付きで解説します。
今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次