記事公開日

ハンバーガーメニューを開いているとき、スクロールバーを非表示にしたい(スクロールは有効)

ハンバーガーメニューを開いているときは、スクロールバーを消せないかな?

でも、メニュー中にあるコンテンツのスクロールは有効にしておきたいの。

どうしたらいい?

了解です!

ハンバーガーメニューがクリックされた時、<body>にoverflow:hidden;を指定する方法が一番シンプルだと思います。

jQueryを使ったサンプルを紹介します。

以下のコードを参考にしてみてください↓

SAMPLE

<!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ではなく、CSSとチェックボックスで制御した場合、更新ボタンを押しても、ハンバーガーメニューが開いたままの状態でぺージが表示されてしまいます。

そのときは、もし「.toggleClass」を使ってしまった場合、ハンバーガーメニューをクリックしても、ボタンが効かない不具合が発生してしまいます。

関連情報

運営者プロフィール
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール