モーダルウインドウ表示中の背景スクロールを禁止する方法
モーダルウインドウ表示中の背景スクロールを禁止する方法を紹介します。モーダルウインドウを表示している間だけ背景ページのスクロールを無効にし、モーダルを閉じると元の状態へ戻すシンプルな実装です。スマートフォンやタブレットでは、モーダル表示中に背景ページまで動いてしまうことがあるため、スクロールを制御することで快適に操作できる画面を作成できます。
サンプルコードでは、「モーダルを開く」ボタンをクリックするとモーダルウインドウが表示されると同時に背景ページのスクロールを禁止します。「閉じる」ボタンをクリックするとモーダルウインドウが閉じ、スクロール制御も解除されます。HTML・CSS・JavaScriptだけで実装しているため、既存サイトにもそのまま組み込みやすい構成です。
お知らせ画面や入力フォーム、確認ダイアログ、キャンペーン表示など、モーダルウインドウ表示中に背景ページを操作させたくない場面で活用できます。モーダルウインドウ内のタイトルや本文はHTML、デザインはCSS、スクロール制御の処理はJavaScriptから変更できるため、用途に合わせて自由にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
モーダル表示中は背景ページをスクロールできません。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>モーダル表示中の背景スクロールを禁止する方法</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモ全体 -->
<div class="modal-background-scroll-lock_wrap">
<!-- タイトル -->
<h1 class="modal-background-scroll-lock_title">
モーダル表示中の背景スクロールを禁止する方法
</h1>
<!-- 説明文 -->
<p class="modal-background-scroll-lock_text">
モーダル表示中は背景ページのスクロールを禁止します。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-background-scroll-lock_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-background-scroll-lock_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-background-scroll-lock_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="modal-background-scroll-lock_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-background-scroll-lock_modal-text">
モーダル表示中は背景ページをスクロールできません。閉じるボタンをクリックするとスクロールできる状態に戻ります。
</p>
<!-- 閉じるボタン -->
<button
class="modal-background-scroll-lock_close"
type="button"
data-modal-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでモーダルウインドウの画面構成を作成し、CSSでレイアウトやデザインを設定、JavaScriptでモーダルウインドウ表示中だけ背景スクロールを禁止する処理を実装しています。 モーダルウインドウを開くとbodyへ専用クラスを追加し、閉じるとクラスを削除することで、背景ページのスクロール制御を行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
・index.html：モーダルウインドウ本体・タイトル・説明文・開くボタン・閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：画面レイアウト・背景色・モーダルウインドウのサイズ・余白・角丸・ボタン・背景オーバーレイ・スクロール禁止用クラスを設定します。
・script.js：モーダルウインドウを開く処理、閉じる処理、背景スクロールを禁止・解除する処理を実装します。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ 「モーダルを開く」ボタンをクリックするとモーダルウインドウが表示され、背景ページのスクロールが禁止されます。
⑤ 「閉じる」ボタンをクリックするとモーダルウインドウが閉じ、背景ページをスクロールできる状態に戻ります。
カスタマイズできる内容
・index.htmlでは、モーダルウインドウタイトル・本文・ボタンの文字を変更できます。
・style.cssでは、モーダルウインドウの色・サイズ・余白・角丸・背景色・影などのデザインを自由に変更できます。
・style.cssの「overflow:hidden;」が背景スクロールを禁止する指定です。
・script.jsでは、スクロール禁止を開始するタイミングや解除するタイミングを変更できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルウインドウの幅や余白が自動調整されます。また、640px以下では余白を調整し、スマートフォン・タブレット・PCでもレイアウトが崩れにくい構成になっています。
コメント