ハンバーガーメニューを開いてる時、背景をスクロールしないようにしたい

前提・実現したいこと

ハンバーガーメニューを開いてる時、背景（コンテンツ）をスクロールしないよう固定したいです。

発生している問題・エラーメッセージ

ハンバーガーメニューを開いてない時もコンテンツが固定されてスクロールできない状態になってしまいます。
ハンバーガーメニューを開いた時、設定したリンク先とは違う箇所に飛びます。（リンク表記はあっています）

該当のソースコード

HTML
1<html class="scroll-prevent">
2	        <div class="hdr_inner">
3				<div class="hamburger" id="click">
4				  <span></span>
5				  <span></span>
6				  <span></span>
7				</div>
8	            <nav class="globalMenuSp" id="nav">
9	                 <ul class="open">
10	                    <li><a href="#menu01">メニュー01</a></li>
11	                    <li><a href="#menu02">メニュー02</a></li>
12	                    <li><a href="#menu03">メニュー03</a></li>
13	                </ul>
14	             </nav>
15	        </div>
16</html>
17

CSS
1html.scroll-prevent {
2    position: fixed;
3    z-index: -1;
4    width: 100%;
5    height: 100%;
6}
7/*　ハンバーガーボタン　*/
8  .hamburger {
9    display : block;
10    position: fixed;
11    z-index : 3;
12    top: 4%;
13    right: 5%;
14    width : 42px;
15    height: 42px;
16    cursor: pointer;
17    text-align: center;
18  }
19  .hamburger span {
20    display : block;
21    position: absolute;
22    width   : 26px;
23    height  : 2px ;
24    left    : 6px;
25    background : #a79384;
26    -webkit-transition: 0.3s ease-in-out;
27    -moz-transition   : 0.3s ease-in-out;
28    transition        : 0.3s ease-in-out;
29  }
30  .hamburger span:nth-child(1) {
31    top: 10px;
32  }
33  .hamburger span:nth-child(2) {
34    top: 20px;
35  }
36  .hamburger span:nth-child(3) {
37    top: 30px;
38  }
39
40  /* ナビ開いてる時のボタン */
41  nav.globalMenuSp.active {
42    background: rgba(138, 117, 101, 0.9);
43    height: 100%;
44  }
45  .hamburger.active span {
46    background : #fff;
47  }
48  .hamburger.active span:nth-child(1) {
49    top : 16px;
50    left: 6px;
51    -webkit-transform: rotate(-45deg);
52    -moz-transform   : rotate(-45deg);
53    transform        : rotate(-45deg);
54  }
55
56  .hamburger.active span:nth-child(2),
57  .hamburger.active span:nth-child(3) {
58    top: 16px;
59    -webkit-transform: rotate(45deg);
60    -moz-transform   : rotate(45deg);
61    transform        : rotate(45deg);
62  }
63
64  nav.globalMenuSp {
65    position: fixed;
66    z-index : 2;
67    top  : 0;
68    left : 0;
69    color: #000;
70    background: #fff;
71    text-align: center;
72    transform: translateY(-100%);
73    transition: all 0.6s;
74    width: 100%;
75    height: 100%;
76    overflow: scroll;
77    -webkit-overflow-scrolling: touch;
78  }
79
80  nav.globalMenuSp ul {
81    margin: 0 auto;
82    padding: 0;
83    padding-top: 18%;
84    width: 100%;
85  }
86
87  nav.globalMenuSp ul li {
88    list-style-type: none;
89    padding: 0;
90    width: 100%;
91  }
92  nav.globalMenuSp ul li:last-child {
93    padding-bottom: 0;
94    border-bottom: none;
95  }
96  nav.globalMenuSp ul li:hover{
97    background: rgba(255, 255, 255, 0.6);
98  }
99
100  nav.globalMenuSp ul li a {
101    display: block;
102    color: #fff;
103    padding: 1em 0;
104    text-decoration :none;
105    font-size: 1.6rem;
106    letter-spacing: 2px;
107    span{
108      display: block;
109      font-size: 1.2rem;
110      margin-top: 9px;
111      color: #4c3e32;
112      }
113  }
114
115  /* このクラスを、jQueryで付与・削除する */
116  nav.globalMenuSp.active {
117    transform: translateY(0%);
118  }

JS
1$(function() {
2    $('.hamburger').click(function() {
3        $(this).toggleClass('active');
4 
5        if ($(this).hasClass('active')) {
6            $('.globalMenuSp').addClass('active');
7        } else {
8            $('.globalMenuSp').removeClass('active');
9        }
10    });
11});
12

試したこと

スクロールしないようにするために、次のJSを追記しました。

JS
1$(function(){
2  $('globalMenuSp').on('change', function(){
3    var st = $(window).scrollTop();
4    if($(this).prop("checked") == true) {
5      $('html').addClass('scroll-prevent');
6      $('html').css('top', -(st) + 'px');
7      $('globalMenuSp').on('change', function(){
8        if($(this).prop("checked") !== true) {
9          $('html').removeClass('scroll-prevent');
10          $(window).scrollTop(st);
11        }
12      });
13    }
14  });
15});

itagagaki

2021/05/12 11:21 編集

勘違いでした。スルーしてください。

行動規範の内容に同意します

回答1件

ベストアンサー

次の関数を用意しておきます。

JavaScript
1function disableScroll(event) {
2  event.preventDefault();
3}

スクロールを禁止したいとき

JavaScript
1document.addEventListener('mousewheel', disableScroll, { passive: false });
2document.addEventListener('touchmove', disableScroll, { passive: false });
3document.body.style.overflow = "hidden";

マウスのホイールとタッチによるスクロールを防ぎます。
スクロールバーでスクロールされるのを防ぐためスクロールバー自体を隠しちゃいます。

戻す（スクロールを許可する）には

JavaScript
1document.removeEventListener('touchmove', disableScroll, { passive: false });
2document.removeEventListener('mousewheel', disableScroll, { passive: false });
3document.body.style.overflow = "visible";

です。

投稿2021/05/12 11:40

itagagaki

総合スコア8402

rrr_e

2021/05/12 13:00

ありがとうございます！初学者のため初歩的な質問となりますが、新たにJSファイルを作成し、以下の通り記述する流れで合っておりますか？？この方法でうまくいかなかったので教えていただけると幸いです。 function disableScroll(event) { event.preventDefault(); } document.addEventListener('mousewheel', disableScroll, { passive: false }); document.addEventListener('touchmove', disableScroll, { passive: false }); document.body.style.overflow = "hidden"; document.removeEventListener('touchmove', disableScroll, { passive: false }); document.removeEventListener('mousewheel', disableScroll, { passive: false }); document.body.style.overflow = "visible";

itagagaki

2021/05/12 13:04

違います。こういうことです。 function disableScroll(event) { event.preventDefault(); } $(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); document.addEventListener('mousewheel', disableScroll, { passive: false }); document.addEventListener('touchmove', disableScroll, { passive: false }); document.body.style.overflow = "hidden"; } else { $('.globalMenuSp').removeClass('active'); document.removeEventListener('mousewheel', disableScroll, { passive: false }); document.removeEventListener('touchmove', disableScroll, { passive: false }); document.body.style.overflow = "visible"; } }); });

rrr_e

2021/05/12 13:23

ご丁寧に教えていただきありがとうございました！おかげ様で解決できました！

行動規範の内容に同意します