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

Question

前提・実現したいこと

問題のサイト
このサイトなんですが、デベロッパーツールでスマホの見た目をエミュレートしたときは、ハンバーガーメニューを開くと縦にスクロールできるのですが、iphoneで見るとハンバーガーメニュー自体が固定されてしまって、縦にスクロールできません。下の方が見切れてしまいます。縦にスクロールできるようにしたいです。できれば一番したにきたときにはバウンドするようにもしたいです。

該当のソースコード

上記リンクに該当のサイトがありますので、お手数ですが、デベロッパーツールでコード見て頂きたいのですが、一応該当する部分のコードを貼りつけておきます。

<header class="sp">
			<img src="img/index/header_sp.png" class="main top-key-p" alt="" />
			<img class="top-schedule-sp" src="img/index/schedule_sp.png"  alt="" />
			<a href="./#top">
				<img src="img/common/logo_sp.png" class="logo_sp" alt="" />
			</a>
			<img src="img/common/open.png" class="nav_btn" alt="" />
			<nav class="gnav_sp sp">
				<ul>
					<a href="./"><li><span class="nav_main">トップ</span><br /><span class="nav_sub">TOP</span></li></a>
					<a href="about.html"><li><span class="nav_main">当院について</span><br /><span class="nav_sub">ABOUT</span></li></a>
					<a href="case.html"><li><span class="nav_main">よくある症状</span><br /><span class="nav_sub">CASE</span></li></a>
					<a href="./#schedule"><li><span class="nav_main">診療時間のご案内</span><br /><span class="nav_sub">SCHEDULE</span></li></a>
					<a href="about.html#access"><li><span class="nav_main">アクセス</span><br /><span class="nav_sub">ACCESS</span></li></a>
				</ul>
				<a href="tel:[phone]">
					<img src="img/common/sp_tel.png" alt="tel" />
				</a>
				<a href="https://majima.mdja.jp" target="_blank"><img src="img/common/sp_link.png" alt="web予約" /></a>
				
			</nav>
		</header>

header .logo_sp {
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0.95;
		z-index: 10000;
	
	}
	header .nav_btn {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 12000;
		/* display: none; */
		width: 17vw;
	}
	header img.main {
		padding-top:62px;
	}
	header img.main.top-key-p{
		padding-top:0;
	}
	.gnav_sp {
		position: fixed;
		/* top: 60px; */
		top: 17vw;
		width: 100%;
		background: linear-gradient(to bottom, #1156A9, #3DCAEA);
		z-index: 9000;
		display: none;
		padding-bottom:130px;
		/* height:100vh; */
		height: calc(100vh - 17vw); 
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.gnav_sp img {
		display: block;
		width: 90%;
		margin: 0 auto;
		text-align: center;
		padding: 10px 0 10px 0;
	}
	.gnav_sp a img {
		/* padding-top: 50px; */
		padding-bottom: 10px;
	}
	.gnav_sp ul {
		margin: 0;
		padding: 0;
		width: 100%;
		
	}
	.gnav_sp li {
		list-style: none;
		margin: 10px;
		padding: 0;
		text-align: left;
		border-bottom: 1px solid #ffffff;
		padding-bottom:10px;
	}
	.gnav_sp li:nth-of-type(1) {
		margin-top: 0;
		padding-top: 20px;
	}
	.nav_main {
		color: #ffffff;
		font-size: 115%;
	}
	.nav_sub {
		color: #dddddd;
	}

<script type="text/javascript">
		$(function() {
			
			
			$(window).on("load", function() {
				var h = $(".logo_sp").height();
				$(".nav_btn").height(h);
				$(".nav_btn").show();
			});
			
			$(".nav_btn").on("click", function(){
				$(".gnav_sp").slideToggle();
				$('html').toggleClass('scroll-prevent') // 追記
				if($(".nav_btn").attr("src") == "img/common/open.png") {
					$(".nav_btn").attr("src", "img/common/close.png");
				} else {
					$(".nav_btn").attr("src", "img/common/open.png");
				}
			});
			
			$(".gnav_sp a").on("click", function() {
				$(".gnav_sp").hide();
			});
		});
	</script>

試したこと

cssでgnav_spをoverflow:auto;にしてみたり、height:100%;にしたりしてみました。しかしだめでした。
overflow-y:scroll;となっているのでスクロールするはずなのですが、固定されてしまいます。

補足情報（FW/ツールのバージョンなど）

どなたかわかる方いらっしゃいましたら、教えてください。よろしくお願いいたします。
追記します。
上記cssコード以外のところで、

.scroll-prevent {
	/*動き固定*/
	position: fixed;
	/*奥行きを管理*/
	z-index: -1;
	/*下2つで背景を元のサイズのまま表示することができる*/
	width: 100%;
	height: 100%;
  }

としています。ハンバーガーメニューのボタンをクリックするとhtmlタグにこのscroll-preventをjsでクラスがつくようになっています。ハンバーガーメニューを開いたときに背景のコンテンツ部分がスクロールされないようにするためです。

html要素全体がスクロールできなくなるので、ハンバーガーメニュー自体もスクロールできないのでしょうか。
だとしたら、背景をスクロールさせずにハンバーガーメニューだけスクロールできるようにするにはどうしたらよいでしょうか。

わかる方いらっしゃったらよろしくお願い致します。

Answer 1

自己解決しました。

heightを低くし、paddingを大きくしたら、スクロールできるようになりました。

ありがとうございました。