ハンバーガーメニューで別ウィンドウが同一ウィンドウ内に？？

こちらのサイトのレスポンシブデザインで、ブラウザ幅が768px以下になった時のハンバーガーメニューの模写を試みています。
https://www.giladhekselman.com/biography

メニューをクリックすると、画面全体にメニューバーが出てくるのですが、それと同時にブラウザの上下スクロールバーがもう一つ新たに出てきて、元々の上下スクロールは無効になります。（添付イメージご参照ください）

これはどういう仕組みなのかお分かりになりますでしょうか？
新たなウィンドウが同じページ内に出現したのか？そんなことが可能なのか？くらいしか考えが及びませんでした。
よろしくお願いします。

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

回答2件

ベストアンサー

1. スクロールの無効化

ご提示いただいたサイトのソースを確認した感じでは、
window.scrollTo関数を使ってスクロールを無効化しているようです。

2.「もう一つのスクロールバー」

Lhankor_Mhyさんがおっしゃっているようにoverflow: autoで実現されています。

サンプルコード

サンプルを作りましたのでよろしければご確認ください。
サンプル：CodePen

投稿2020/07/14 03:57

PgMidori

総合スコア184

DaisukeKaku

2020/07/16 09:06

サンプルコードまでありがとうございます！大変参考になりました！！

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

こんにちは。
これです。

css
1#overlayNav {
2	position: fixed;
3	z-index: 1001;
4	width: 100%;
5	height: 100%;
6	top: 0;
7	right: 0;
8	bottom: 0;
9	left: 0;
10	opacity: 0;
11	visibility: hidden;
12	line-height: 1em;
13	text-align: left;
14	overflow: auto; /* ←　これです。 */
15	pointer-events: none;
16	background-color: rgba(32,62,96,.97);
17	-moz-osx-font-smoothing: grayscale;
18	-webkit-font-smoothing: antialiased;
19	-moz-box-sizing: border-box;
20	-webkit-box-sizing: border-box;
21	box-sizing: border-box;
22	-webkit-transition: opacity .14s 0s ease-in-out,visibility 0s .14s linear;
23	-moz-transition: opacity .14s 0s ease-in-out,visibility 0s .14s linear;
24	-ms-transition: opacity .14s 0s ease-in-out,visibility 0s .14s linear;
25	-o-transition: opacity .14s 0s ease-in-out,visibility 0s .14s linear;
26	transition: opacity .14s 0s ease-in-out,visibility 0s .14s linear;
27}