【jQuery】フルスクリーンナビゲーション時に背景のスクロールを無効にする方法
–メニューが開いてもページが動かない！UX向上のための小技
ハンバーガーメニューやモーダルナビゲーションを開いたとき、後ろのページがスクロールできるままだと見た目も操作性も悪くなってしまいます。
本記事では、jQueryを使ってナビゲーションの開閉に応じて背景スクロールを無効化する方法を、わかりやすく解説します。
目次
🧐 なぜ背景スクロールを止める必要があるのか？
スマホでよく見る全画面ナビゲーションやモーダルメニュー。開いた状態で背面がスクロールできてしまうと、以下のようなUXトラブルが発生します：
- ナビの下でページが勝手に動いてしまう
- 閉じた時にスクロール位置がズレる
- 操作していないのに背景がぬるぬる動いて不快
だからこそ、ナビゲーションを開いた瞬間に「ページ全体を固定する」のが大事なのです。
🔧 実装の仕組み
この方法では、次のような構造で動きます：
- メニューを開くときに
.backクラスをボタンに付ける <html>要素にposition: fixedを与えて、画面全体のスクロールを停止- メニューを閉じるときに
.backを削除し、htmlのCSSを元に戻す
この流れを jQuery でシンプルに制御します。
💻 jQueryコードと使い方
以下のコードを使うことで、ボタンをクリックするたびにナビゲーションの開閉とスクロールのON/OFFが切り替わります。
$(".toggle-btn").on("click", function (e) {
if (!$(this).hasClass('back')) {
$(this).addClass('back');
$("html").css({
"height": "100%",
"overflow-y": "hidden",
"position": "fixed"
});
} else {
$(this).removeClass('back');
$("html").css({
"height:": "auto",
"overflow-y": "auto",
"position": "static"
});
}
});🔍 HTML側の一例
<button class="toggle-btn">MENU</button>
<nav class="fullscreen-nav">
<!-- ナビゲーション内容 -->
</nav>この .toggle-btn をクリックすると、ナビが開き、背景が固定されるという流れになります。
⚠️ よくある間違いと対処法
| 問題 | 原因と対策 |
|---|---|
| スクロールが止まらない | jQueryが読み込まれていない or セレクターの指定ミス |
| ナビが閉じてもスクロールできない | htmlのCSSを元に戻す処理が正しく動いていない（typo に注意！） |
| 背景が一瞬ズレる | 開くときに top の位置保持が必要な場合も。高度化対応で追加できます。 |
🌟 応用：モーダルやポップアップにも使える！
このコードはナビゲーションだけでなく、以下のUIにも応用できます：
- モーダルウィンドウ
- お問い合わせフォームのポップアップ
- フルスクリーン広告
- 画像ギャラリーの拡大表示
ポイントは「画面の最前面に何かが開いたら、背景を止める」。この考え方さえあれば、あらゆる場面で使いまわせます！
✅ まとめ
フルスクリーンナビゲーションの開閉時に背景をスクロールさせない処理は、たった数行のjQueryで簡単に実現できます。
.backクラスで状態管理htmlにposition: fixedを使ってスクロール停止- ナビを閉じたらCSSを戻してリセット
スマホ対応やUX向上にも役立つこのテクニック、ぜひサイトに取り入れてみてください！
関連記事
