ドロワーメニューのスクロールについて

お世話になります。

jQueryを使用し、
ドロワーメニューを作成したのですが、
ドロワーメニューの高さが画面に高さより高い場合、
一定以上下にスクロールができない状態になっております。

下記に関連するコードを記します。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">	
5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6<title>aaa</title>
7<link rel="stylesheet" href="css/reset.css">
8<link rel="stylesheet" href="css/nav-slide.css">
9<link rel="stylesheet" href="css/top.css">
10<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11</head>
12<body id="top">
13<div class="wrapper">
14<header>
15<div id="header">
16    <div class="header-logo">
17    <a href="#"><img src="img/header-logo.png" alt=""></a>
18    </div>
19</div>
20  <div class="menu-trigger" href="">
21    <span></span>
22    <span></span>
23    <span></span>
24  </div>
25<nav>
26    <ul class="g-nav">
27    <li>aaa</li>
28    <li>aaa</li>
29    <li>aaa</li>
30    <li>aaa</li>
31    <li>aaa</li>
32    <li>aaa</li>
33    <li>aaa</li>
34    <li>aaa</li>
35    <li>aaa</li>
36    </ul>
37</nav>
38  <div class="overlay"></div>
39</header>
40</div>
41</body>
42</html>
43

css1
1@charset "UTF-8";
2/* CSS Document */
3.wrapper {
4  height: 100%;
5  position: relative;
6}
7.overlay {
8  content: "";
9  display: block;
10  width: 0;
11  height: 0;
12  background-color: rgba(0, 0, 0, 0.5);
13  position: absolute;
14  top: 0;
15  left: 0;
16  z-index: 50;
17  opacity: 0;
18  transition: opacity .5s;
19}
20.overlay.open {
21  width: 100%;
22  height: 100vh;
23  opacity: 1;
24}
25
26.menu-trigger {
27  display: inline-block;
28  width: 30px;
29  height: 28px;
30  vertical-align: middle;
31  cursor: pointer;
32  position: fixed;
33  top: 50px;
34  right: 70px;
35  z-index: 150;
36/*   transform: translateX(0);
37  transition: transform .5s;
38 */}
39/* .menu-trigger.active {
40  transform: translateX(-250px);
41}
42 */.menu-trigger span {
43  display: inline-block;
44  box-sizing: border-box;
45  position: absolute;
46  left: 0;
47  width: 100%;
48  height: 1px;
49  background-color: #fff;
50  transition: all .5s;
51}
52.menu-trigger.active span {
53  background-color: #fff;
54}
55.menu-trigger span:nth-of-type(1) {
56  top: 0;
57}
58.menu-trigger.active span:nth-of-type(1) {
59  transform: translateY(13px) rotate(-45deg);
60}
61.menu-trigger span:nth-of-type(2) {
62  top: 13px;
63}
64.menu-trigger.active span:nth-of-type(2) {
65  opacity: 0;
66}
67.menu-trigger span:nth-of-type(3) {
68  bottom: 0;
69}
70.menu-trigger.active span:nth-of-type(3) {
71  transform: translateY(-13.5px) rotate(45deg);
72}
73
74nav {
75  width: 350px;
76  height: 100%;
77  padding-top: 105px;
78  background-color: rgb(35, 36, 42, 0.9);
79  position: fixed;
80  top: 0;
81  right: 0;
82  z-index: 100;
83  transform: translate(350px);
84  transition: all .5s;
85}
86nav.open {
87  transform: translateZ(0);
88    overflow: auto;
89}
90

css2
1@charset "UTF-8";
2
3body {
4    width: 100%;
5    font-size: 14px;
6    position: relative;
7}
8
9body.fixed{
10  position: fixed;
11  width:100%;
12}
13
14img {
15    width:100%;
16}
17
18header {
19    display: block;
20    position: fixed;
21    top: 0;
22    left: 0;
23    z-index: 1;
24    width: 100%;
25}
26
27header .header-logo {
28    width: 180px;
29    margin: 50px 0 0 70px;
30}
31
32ul.g-nav {
33    list-style: none;
34    padding-left: 60px;
35}

js
1$('.menu-trigger').on('click',function(){
2  if($(this).hasClass('active')){
3    $(this).removeClass('active');
4    $('nav').removeClass('open');
5    $('.overlay').removeClass('open');
6  } else {
7    $(this).addClass('active');
8    $('nav').addClass('open');
9    $('.overlay').addClass('open');
10  }
11});
12$('.overlay').on('click',function(){
13  if($(this).hasClass('open')){
14    $(this).removeClass('open');
15    $('.menu-trigger').removeClass('active');
16    $('nav').removeClass('open');      
17  }
18});
19
20
21var state = false;
22var scrollpos;
23$('.menu-trigger').on('click', function(){
24  if(state == false) {
25    scrollpos = $(window).scrollTop();
26    $('body').addClass('fixed').css({'top': -scrollpos});
27    state = true;
28  } else {
29    $('body').removeClass('fixed').css({'top': 0});
30    window.scrollTo( 0 , scrollpos );
31    state = false;
32  }
33});

長々と申し訳ありません。
nav　や　nav.open　に　overflow:auto や scroll を指定しても変わらず、で途方に暮れています。

ドロワーメニューの作り方を参考に作成し、背景の固定方法ではこちらを参考にしました。

やりたいこと

画面の高さに関係なくドロワーメニューをスクロールしたいと考えております。
ヒント等をご教示いただけますと幸いです。

情報の不足がございましたらお知らせください。
よろしくお願いいたします。

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

回答1件

ベストアンサー

navの部分が height: 100%; + padding-top: 105px; で
高さが100%を超えてしまうことが原因なので
box-sizing: border-box; を追加して
padding-top: 105px; を height: 100%; に含めれば
はみ出さず最後までスクロールできます。

css
1nav {
2  width: 350px;
3  height: 100%;
4  padding-top: 105px;
5  box-sizing: border-box;
6  background-color: rgb(35, 36, 42, 0.9);
7  position: fixed;
8  top: 0;
9  right: 0;
10  z-index: 100;
11  transform: translate(350px);
12  transition: all 0.5s;
13}