- 記事公開日
ハンバーガーメニューを開いているとき、スクロールバーを非表示にしたい（スクロールは有効）
ハンバーガーメニューを開いているときは、スクロールバーを消せないかな？
でも、メニュー中にあるコンテンツのスクロールは有効にしておきたいの。
どうしたらいい？
了解です！
ハンバーガーメニューがクリックされた時、<body>にoverflow:hidden;を指定する方法が一番シンプルだと思います。
jQueryを使ったサンプルを紹介します。
以下のコードを参考にしてみてください↓
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>DEMO「ハンバーガーメニューOPEN時はスクロールバーを非表示（スクロールは有効）」のサンプル</title>
<style>
/* **************************************************
レイアウト
************************************************** */
* {
margin:0;
padding:0;
}
main {
height:300vh;
}
header {
position:relative;
width:94%;
height:112px;
margin:20px auto;
}
/* **************************************************
ハンバーガーメニュー
************************************************** */
/* -----------------------------------------------------
3本線の設定（クリックされていない状態）
----------------------------------------------------- */
/* 背景でクリック可能に */
#menu {
position:absolute;
top:0%;
right:0%;
z-index:30;
display:inline-block;
width:72px;
height:72px;
}
.menu_button {
width:100%;
height:100%;
background:none;
border:0;
}
/* 3本線の描画 */
.menu_button span.menu_icon ,
.menu_button span.menu_icon:before,
.menu_button span.menu_icon:after {
position:absolute;
transition: all .4s;
content:'';
display:block;
width:72px;
height:1px;
background-color:#707070;
}
/* 真ん中の線 */
.menu_button span.menu_icon {
}
/* 上の線 */
.menu_button span.menu_icon:before {
bottom:30px;
}
/* 下の線 */
.menu_button span.menu_icon:after {
top:30px;
}
/* 右側エリア（画面外に隠す） */
.menulist {
position:fixed;
right:-110%;
top:0%;
z-index:-1;
transition:all 0.3s; /*アニメーション設定*/
width:100%;
height:100%;
background:#1E7FB7;
}
/* -----------------------------------------------------
3本線を×に切り替え（クリックされた状態）
----------------------------------------------------- */
/* メニューオープン時は真ん中の線を透明にする */
.menu_chg .menu_button span.menu_icon {
background-color:rgba(255, 255, 255, 0);
}
/* 上の線を斜めに */
.menu_chg .menu_button span.menu_icon::before {
bottom:0;
transform:rotate(45deg);
background-color:#fff;
}
/* 下の線を斜めに */
.menu_chg .menu_button span.menu_icon::after {
top:0;
transform:rotate(-45deg);
background-color:#fff;
}
/* 隠していた右側エリアを画面内に戻す */
.menu_open.menulist {
position:fixed;
right:0;
z-index:10;
}
/* **************************************************
メニュー内デザイン
************************************************** */
.menulist dl {
width:50vw;
height:50vh;
margin:50px;
overflow:auto;
}
.menulist dl div:first-child {
border-top:1px solid #fff;
}
.menulist dl div {
color:#fff;
line-height:60px;
text-align:left;
padding:20px;
border-bottom:1px solid #fff;
}
/* **************************************************
スクロール―の表示・非表示
************************************************** */
.scroll_off {
overflow:hidden;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
<!-- ハンバーガーボタンをクリック -->
$(".menu_button").on("click", function() {
<!-- ハンバーガーメニュー開閉 -->
$('.menulist').toggleClass("menu_open");
$('#menu').toggleClass("menu_chg");
<!-- ハンバーガーメニューを開いた時は、メインレイヤーのスクロールを非表示にする -->
if($('body').hasClass('scroll_off')){
$('body').removeClass('scroll_off');
} else {
$('body').addClass('scroll_off');
}
});
});
</script>
</head>
<body>
<header>
<div id="logo">ロゴ</div>
<!-- ==========================================
ハンバーガーボタン
============================================ -->
<div id="menu">
<button class="menu_button">
<span class="menu_icon"></span>
</button>
</div>
<!-- ==========================================
メニュー内
============================================ -->
<nav class="menulist">
<div class="menulist_inner">
<dl>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
<div>
<dt>2022.8.17</dt>
<dd>あああああああああ</dd>
</div>
</dl>
</div>
</nav>
</header>
<main></main>
<footer></footer>
</body>
</html>
ハンバーガーボタンがクリックされると、jQueryでスクロールバーの表示・非表示を切り替えるクラス（scroll_off）を付与しています。
本来であれば、scroll_offの切り替えも「.toggleClass」を使う方がシンプルですが、今回はあえて使用していません。
その理由は、ブラウザの更新ボタンを押したときに、ハンバーガーメニューが開いたままの状態で維持されたときを考慮しています。
今回のコードでは、更新ボタンを押すとハンバーガーメニューが閉じた状態でぺージが表示されるので問題はありませんでした。
ところが、ハンバーガーメニューの開閉をjQueryではなく、ＣＳＳとチェックボックスで制御した場合、更新ボタンを押しても、ハンバーガーメニューが開いたままの状態でぺージが表示されてしまいます。
そのときは、もし「.toggleClass」を使ってしまった場合、ハンバーガーメニューをクリックしても、ボタンが効かない不具合が発生してしまいます。
