ドロワーメニューでスクロールできるようにしたい

前提・実現したいこと

HTML、CSS、JavaScriptでホームページを作っています。
SPレイアウト時にドロワーメニューを表示させていますが
スクロールが効きません。
階層が多いので、スクロールできるようにしたいです。
ご指導のほどよろしくお願いいたします。

該当のソースコード

html
1<div class="inner">
2  <ul>
3    <li>
4      <ul class="drop-nav">
5        <li>
6          <div class="header-logo">
7            <h1><a href="index.html"><img src=""></a>
8            </h1>
9          </div>
10        </li>
11        <li>
12          <div class="hamburger sp-block">
13            <span></span>
14            <span></span>
15            <span></span>
16          </div>
17        </li>
18      </ul>
19    </li>
20    <li>
21      <nav class="globalMenuSp sp-block">
22        <ul>
23          <li><a href="">1111</a></li>
24          <li><a href="" class="nav02">2222</a></li>
25          <li class="has-child"><a href="" class="nav03">3333</a>
26            <ul class="">
27              <li><a href="">3333</a></li>
28              <li><a href="">3333</a></li>
29              <li><a href="">3333</a></li>
30              <li><a href="">3333</a></li>
31              <li><a href="">3333</a></li>
32            </ul>
33          </li>
34          <li><a href="" class="nav04">4444</a></li>
35          <li class="has-child"><a href="" class="nav05">5555</a>
36            <ul class="">
37              <li><a href="">5555</a></li>
38              <li><a href="">5555</a></li>
39              <li><a href="">5555</a></li>
40              <li><a href="">5555</a></li>
41              <li><a href="">5555</a></li>
42              <li><a href="">5555</a></li>
43              <li><a href="">5555</a></li>
44              <li><a href="">5555</a></li>
45            </ul>
46          </li>
47          <li>
48            <a href="">
49              <figure>
50                <img src="">
51              </figure>
52            </a>
53          </li>
54        </ul>
55      </nav>
56    </li>
57  </ul>
58</div>

css
1.hamburger {
2  display: block;
3  position: fixed;
4  z-index: 3;
5  right: 13px;
6  top: 19px;
7  width: 42px;
8  height: 42px;
9  cursor: pointer;
10  text-align: center;
11
12  span {
13    display: block;
14    position: absolute;
15    width: 30px;
16    height: 1px;
17    left: 6px;
18    background: #333;
19    transition: 0.3s ease-in-out;
20
21    &:nth-child(1) {
22      top: 10px;
23    }
24
25    &:nth-child(2) {
26      top: 20px;
27    }
28
29    &:nth-child(3) {
30      top: 30px;
31    }
32  }
33
34  &.active {
35    span {
36      &:nth-child(1) {
37        top: 19px;
38        left: 6px;
39        transform: rotate(-45deg);
40      }
41
42      &:nth-child(2) {
43        top: 19px;
44        transform: rotate(45deg);
45      }
46
47      &:nth-child(3) {
48        top: 19px;
49        transform: rotate(45deg);
50      }
51    }
52  }
53}
54
55nav {
56  &.globalMenuSp {
57    position: fixed;
58    z-index: 2;
59    top: 0;
60    left: 0;
61    color: #000;
62    background: #fff;
63    text-align: center;
64    transform: translateY(-100%);
65    transition: all 0.6s;
66    width: 100%;
67
68    &>ul {
69      background: #009e42;
70      padding-top: 80px;
71      height: 100%;
72      overflow: auto;
73      -webkit-overflow-scrolling: touch;       
74
75      li {
76        list-style-type: none;
77        padding: 0;
78        width: 100%;
79        border-bottom: 1px solid #fff;
80
81        &:last-child {
82          padding-bottom: 0;
83          border-bottom: none;
84        }
85
86        &:hover {
87          background: #e2a64a;
88          opacity: 1;
89        }
90
91        .nav07 {
92          &::after {
93            content: "";
94            display: inline-block;
95            width: 10px;
96            height: 10px;
97            background-image: url();
98            background-size: contain;
99            vertical-align: middle;
100            margin-left: 8px;
101            border: none;
102            transform: rotate(0deg);
103          }
104        }
105
106        a {
107          font-size: 1.6rem;
108          margin: 0;
109          padding: 5vw 0;
110          text-align: left;
111          padding-left: 10px;
112          color: #fff;
113          font-weight: bold;
114          border: none;
115
116          &::after {
117            position: absolute;
118            top: 50%;
119            margin-top: -7px;
120            margin-right: 24px;
121            right: 0;
122            display: inline-block;
123            width: 8.5px;
124            height: 8.5px;
125            border-top-width: 0;
126            border-left-width: 0;
127            border-bottom-width: 1px;
128            border-right-width: 1px;
129            border-style: solid;
130            border-color: #fff;
131            transform-origin: 75% 75%;
132            transform: rotate(-45deg);
133            transition: transform 0.1s ease;
134            content: "";
135          }
136        }
137
138        &:nth-of-type(3) {
139          a {
140            font-size: 1.6rem;
141            margin: 0;
142            padding: 5vw 0;
143            text-align: left;
144            padding-left: 10px;
145            color: #fff;
146            font-weight: bold;
147            border: none;
148  
149            &::after {
150              position: absolute;
151              top: 50%;
152              margin-top: -7px;
153              margin-right: 24px;
154              right: 0;
155              display: inline-block;
156              width: 8.5px;
157              height: 8.5px;
158              border-top-width: 0;
159              border-left-width: 0;
160              border-bottom-width: 1px;
161              border-right-width: 1px;
162              border-style: solid;
163              border-color: #fff;
164              transform-origin: 75% 75%;
165              transform: rotate(45deg);
166              transition: transform 0.1s ease;
167              content: "";
168            }
169          }
170        }
171
172        &:nth-of-type(5) {
173          a {
174            font-size: 1.6rem;
175            margin: 0;
176            padding: 5vw 0;
177            text-align: left;
178            padding-left: 10px;
179            color: #fff;
180            font-weight: bold;
181            border: none;
182  
183            &::after {
184              position: absolute;
185              top: 50%;
186              margin-top: -7px;
187              margin-right: 24px;
188              right: 0;
189              display: inline-block;
190              width: 8.5px;
191              height: 8.5px;
192              border-top-width: 0;
193              border-left-width: 0;
194              border-bottom-width: 1px;
195              border-right-width: 1px;
196              border-style: solid;
197              border-color: #fff;
198              transform-origin: 75% 75%;
199              transform: rotate(45deg);
200              transition: transform 0.1s ease;
201              content: "";
202            }
203          }
204        }
205
206        &:last-of-type {
207          background-color: #fff;
208
209          a {
210            &::after {
211              position: absolute;
212              top: 50%;
213              margin-top: -7px;
214              margin-right: 24px;
215              right: 0;
216              display: none;
217              width: 8.5px;
218              height: 8.5px;
219              border-top-width: 0;
220              border-left-width: 0;
221              border-bottom-width: 1px;
222              border-right-width: 1px;
223              border-style: solid;
224              border-color: #fff;
225              transform-origin: 75% 75%;
226              transform: rotate(45deg);
227              transition: transform 0.1s ease;
228              content: "";
229            }
230          }
231        }
232
233        &.has-child {
234          & > ul {
235            padding: 0;
236
237            & > li {
238              background-color: #e2a64a;
239
240              a {
241                &::after {
242                  position: absolute;
243                  top: 50%;
244                  margin-top: -7px;
245                  margin-right: 24px;
246                  right: 0;
247                  display: inline-block;
248                  width: 8.5px;
249                  height: 8.5px;
250                  border-top-width: 0;
251                  border-left-width: 0;
252                  border-bottom-width: 1px;
253                  border-right-width: 1px;
254                  border-style: solid;
255                  border-color: #fff;
256                  transform-origin: 75% 75%;
257                  transform: rotate(-45deg);
258                  transition: transform 0.1s ease;
259                  content: "";
260                }
261              }
262            }
263          }
264        }
265      }
266    }
267
268    &.active {
269      transform: translateY(0%);
270    }
271  }
272}

javascript
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
13$(function () {
14  var state = false;
15  var scrollpos;
16  $(".hamburger").on("click", function () {
17    $("this").toggleClass("open");
18    if (state == false) {
19      scrollpos = $(window).scrollTop();
20      $("body").addClass("is-fixed").css({ top: -scrollpos });
21      state = true;
22    } else {
23      $("body").removeClass("is-fixed").css({ top: 0 });
24      window.scrollTo(0, scrollpos);
25      state = false;
26    }
27  });
28});

試したこと

「class globalMenuSp」に対して「position: fixed」を付与していますので
その直下の「ul」に対して、「height: 100%; overflow: auto」のコードを記述しました。
しかし「height: 100%」が効かず、やはりスクロールができませんでした。
heightの高さを指定すると効くようになりますが、ドロワー部分が崩れてしまいます。

javascriptでコードの記入漏れと誤りがありました。
「class hamburger」をクリックするとトグルが変形し
アクティブになれば「class globalMenuSp」に対して「class active」を付与し、ドロワーメニューの開閉
同時に「body」に対して「class is-fixed」を付与し、背景が固定されるようにしています。

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

回答1件

ご提示のコードを試してみましたが、

js
1$("ul").toggleClass("open");

とあるのにSCSSで.openのスタイルが定義されていなかったり、.activeのスタイルがあるのにスクリプトで操作されていなかったり、とちぐはぐのようです。
もう一度、コードを再確認してみるのがいいように思います。

なお、「heightの高さを指定すると効くようになりますが、ドロワー部分が崩れてしまいます」という現象は確認できませんでした。

投稿2021/11/25 00:52

Lhankor_Mhy

総合スコア36074

soraatori

2021/11/25 03:46

ご回答ありがとうございます。ドロワーメニューを作成している際に、不要なコードを作ってしまったようです。今一度記憶を頼りにコードを精査いたします。崩れてしまうというのは、通常ですとメニューの開閉に連動して下部のメニューも下に下がったり上に上がったりすると思いますが、 heightの高さを指定しますと、開閉した際に連動しなくなり、開いたメニューの下にメニューが隠れてしまうという現象が起きるようになりました。