ハンバーガーメニュー内でスクロールできない

前提・実現したいこと

ハンバーガーメニュー内で縦スクロールできるようにしたいです。

発生している問題

縦スクロールできず、機種によっては下方の文字が切れてしまいます。

該当のソースコード

HTML
1	<div class="hdr_inner">
2		<div class="hamburger" id="click">
3		  <span></span>
4		  <span></span>
5		  <span></span>
6		</div>
7	    <nav class="globalMenuSp" id="nav">
8	    	<a href="index.html" class="logo"><img src="assets/images/logo_key.png" alt="pluster"></a>
9	     	<ul class="open">
10	     	　　 <li><a href="index.html">01</a></li>
11	            <li><a href="#">02</a></li>
12	            <li><a href="#">03</a></li>
13	            <li><a href="#">04</a></li>
14	            <li></li>
15	        </ul>
16	     	<p><span>ACCESS</span>zyuusyohairu</p>
17	     </nav>
18	</div>

CSS
1html{
2  overflow-x: hidden;
3}
4body{
5  height: auto;
6  font-family: "Helvetica Neue",
7  Arial,
8  "Hiragino Kaku Gothic ProN",
9  "Hiragino Sans",
10  Meiryo,
11  sans-serif;
12  background-size: 100%;
13  display: block;
14  color: #000000;
15}
16.hamburger {
17    display : block;
18    position: fixed;
19    z-index : 3;
20    top: 2.7%;
21    right: 3%;
22    width : 42px;
23    height: 42px;
24    cursor: pointer;
25    text-align: center;
26  }
27  .hamburger span {
28    display : block;
29    position: absolute;
30    width   : 24px;
31    height  : 2px ;
32    left    : 6px;
33    background : #fff;
34    -webkit-transition: 0.3s ease-in-out;
35    -moz-transition   : 0.3s ease-in-out;
36    transition        : 0.3s ease-in-out;
37  }
38  .hamburger span:nth-child(1) {
39    top: 6px;
40  }
41  .hamburger span:nth-child(2) {
42    top: 12px;
43  }
44  .hamburger span:nth-child(3) {
45    top: 18px;
46  }
47
48  /* ナビ開いてる時のボタン */
49  nav.globalMenuSp.active {
50    background: #464144;
51    height: 100%;
52  }
53  .hamburger.active span {
54    background : #fff;
55  }
56  .hamburger.active span:nth-child(1) {
57    top : 16px;
58    left: 6px;
59    -webkit-transform: rotate(-45deg);
60    -moz-transform   : rotate(-45deg);
61    transform        : rotate(-45deg);
62  }
63
64  .hamburger.active span:nth-child(2),
65  .hamburger.active span:nth-child(3) {
66    top: 16px;
67    -webkit-transform: rotate(45deg);
68    -moz-transform   : rotate(45deg);
69    transform        : rotate(45deg);
70  }
71  nav.globalMenuSp {
72    position: fixed;
73    padding-bottom: 100px;
74    z-index : 2;
75    top  : 0;
76    left : 0;
77    color: #000;
78    background: #fff;
79    text-align: center;
80    transform: translateY(-100%);
81    transition: all 0.6s;
82    width: 100%;
83    height: 100%;
84    overflow: scroll;
85    -webkit-overflow-scrolling: touch;
86  }
87  nav.globalMenuSp a.logo{
88    padding:30px 0;
89    display: inline-block;
90    margin: 0 auto 60px;
91  }
92  nav.globalMenuSp ul {
93    margin: 0 auto 50px;
94    width: 100%;
95  }
96  nav.globalMenuSp ul li {
97    list-style-type: none;
98    width: 100%;
99    color: #fff;
100    text-align: left;
101  }
102  nav.globalMenuSp ul li:last-child {
103    padding-bottom: 0;
104    border-bottom: none;
105  }
106  nav.globalMenuSp ul li:hover{
107    background: rgba(255, 255, 255, 0.6);
108  }
109  nav.globalMenuSp ul li a {
110    display: block;
111    color: #fff;
112    padding: 30px 10%;
113    text-decoration :none;
114    font-size: 2.4rem;
115    letter-spacing: 2px;
116    span{
117      vertical-align: top;
118      font-size: 1.2rem;
119      margin-right: 10px;
120      color: #fff;
121      }
122  }
123  nav.globalMenuSp p{
124    font-size: 1.2rem;
125    line-height: 2;
126    padding: 0 10%;
127    text-align: left;
128    color: #fff;
129    span{
130      color: #fff;
131      display: block;
132      margin-bottom: 10px;
133      font-weight: bold;
134      line-height: 1;
135    }
136  }
137  nav.globalMenuSp.active {
138    transform: translateY(0%);
139  }

JS
1function disableScroll(event) {
2event.preventDefault();
3}
4
5$(function() {
6$('.hamburger').click(function() {
7$(this).toggleClass('active');
8
9if ($(this).hasClass('active')) {
10$('.globalMenuSp').addClass('active');
11document.addEventListener('mousewheel', disableScroll, { passive: false });
12document.addEventListener('touchmove', disableScroll, { passive: false });
13document.body.style.overflow = "hidden";
14} else {
15$('.globalMenuSp').removeClass('active');
16document.removeEventListener('mousewheel', disableScroll, { passive: false });
17document.removeEventListener('touchmove', disableScroll, { passive: false });
18document.body.style.overflow = "visible";
19}
20});
21});
22
23$('.open a[href]').on('click', function(event) {
24    $('.hamburger').trigger('click');
25});

試したこと

「.nav.globalMenuSp」に以下CSSを追記しましたが、変わりませんでした。。
position: fixed;
overflow-y: scroll;
width:100%;
height:100%;

itagagaki

2021/05/19 00:12

ご提示のコードだけだと何も表示されません。回答者に問題が伝わることをテスト済みのコードを貼ってください。

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

回答1件

ベストアンサー

下方の文字が切れてしまいます

padding-bottom: 100pxの分だけ、スクリーンの外に出ているのが原因だと思います。
以下のようにするとどうでしょうか。

css
1nav.globalMenuSp {
2    position: fixed;
3    padding-bottom: 100px;
4    z-index: 2;
5    top: 0;
6    left: 0;
7    color: #000;
8    background: #fff;
9    text-align: center;
10    transform: translateY(-100%);
11    transition: all 0.6s;
12    width: 100%;
13    height: 100%;
14    overflow: scroll;
15    -webkit-overflow-scrolling: touch;
16    box-sizing: border-box; /* 追加 */