質問: こちらのサイトのレスポンシブデザインで、ブラウザ幅が768px以下になった時のハンバーガーメニューの模写を試みています。 メニューをクリックすると、画面全体にメニューバーが出てくるのですが、それと同時にブラウザの上下スクロールバーがもう一つ新たに出てきて、元々の上下スクロールは無効になります。(添付イメージご参照ください) これはどういう仕組みなのかお分かりになりますでしょうか? 新たなウィンドウが同じページ内に出現したのか?そんなことが可能なのか?くらいしか考えが及びませんでした。 よろしくお願いします。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ac4f9d8de129ca6f965cc7d09b1fd8c0.png)
回答: 1. スクロールの無効化 ご提示いただいたサイトのソースを確認した感じでは、 `window.scrollTo`関数を使ってスクロールを無効化しているようです。 2.「もう一つのスクロールバー」 Lhankor_Mhyさんがおっしゃっているように`overflow: auto`で実現されています。 サンプルコード サンプルを作りましたのでよろしければご確認ください。 サンプル:CodePen