- ハンバーガーメニューを開いた時、bodyタグをスクロールさせない
- ハンバーガーメニューを閉じた時、開いた時の位置に戻したい
このような悩みにお答えします。
この記事では、ハンバーガーメニューが開いている間、背景のスクロールを防ぐ方法について解説します。
この記事を読むことで、より使いやすいハンバーガーメニューを作ることができるようになります。
この記事を書いた人
すずき
フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。
完成品のデモ
まずは完成品のデモを紹介します。HTMLとCSS、jQueryで実装しています。
通常、<body>タグは下にスクロール可能ですが、ハンバーガーメニューが開いている間はスクロールが無効になります。
See the Pen ドロワーナビテンプレート by すずき (@k-suzuki3533) on CodePen.
具体的な実装方法
ハンバーガーメニューの背景スクロールを制御するための方法を詳しく解説していきます。jQueryのみで簡単に実装できます。
jQueryを使用する際は、CDNの読み込みを忘れないようにしましょう。
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>以下のコードで実装することができます。
$(function () {
// ハンバーガーメニューボタンがクリックされたときのイベントハンドラを設定
$(".l-drawer-btn").click(function () {
// 現在のbodyタグのoverflowスタイルを確認
if ($("body").css("overflow") === "hidden") {
// もしoverflowがhiddenなら、bodyのスタイルを元に戻す
$("body").css({ height: "", overflow: "" });
} else {
// そうでなければ、bodyにheight: 100%とoverflow: hiddenを設定し、スクロールを無効にする
$("body").css({ height: "100%", overflow: "hidden" });
}
});
});
背景をスクロールさせないために必要なCSSは以下のとおり。
body {
height: 100%;
overflow: hidden;
}ハンバーガーメニューボタンがクリックされた時に、上記のスタイルを切り替えるよう指定しています。
classの着脱をし、CSSファイルで管理する方法もありますが、このCSSはどのような案件でも変更することはないので、JavaScriptで直接変更しています。
今回はjQueryを使用していますが、バニラJavaScriptを使用する場合は以下のようになります。
document.addEventListener("DOMContentLoaded", function () {
// ハンバーガーメニューボタンがクリックされたときのイベントハンドラを設定
document.querySelector(".l-drawer-btn").addEventListener("click", function () {
// body要素を取得
var body = document.body;
// 現在のbodyのスタイルを取得
var bodyStyle = window.getComputedStyle(body);
// bodyのoverflowスタイルがhiddenかどうかを確認
if (bodyStyle.overflow === "hidden") {
// もしoverflowがhiddenなら、bodyのスタイルを元に戻す
body.style.height = "";
body.style.overflow = "";
} else {
// そうでなければ、bodyにheight: 100%とoverflow: hiddenを設定し、スクロールを無効にする
body.style.height = "100%";
body.style.overflow = "hidden";
}
});
});メニューだけをスクロール可能にする
最後に、メニューだけをスクロール可能にする方法を紹介します。
ハンバーガーメニューの内容によっては、下部が見切れて表示されなくなることがあります。
ハンバーガーメニューにoverflow:scroll;を追加することでスクロールを可能にします。
高さの指定も必要なので、一緒に指定します。
l-drawer-nav__inner {
height: 100%;
overflow: scroll;
}まとめ
ハンバーガーメニューが開いている間、背景スクロールを制御する方法を紹介しました。
実装のポイントは、ハンバーガーメニューの操作に応じてbodyタグのスタイルを切り替えることです。
これにより、メニューが開いている間はスクロールを防ぐことができます。
下記記事では、ハンバーガーメニューの作り方や注意する点をまとめています。
よければこちらも参考にしてみてください。
