【PC・スマホ両対応】CSSだけでモーダルの背景をスクロールさせない新しい方法（つっかえ棒式モーダル背景固定法） - Qiita

スクロールチェーンを防ぐための「overscroll-behavior: contain」を応用した方法をご紹介します。 名付けて「つっかえ棒式モーダル背景固定法」です。 ソースコードはこちら https://github.com/gorimatyan/css-modal-nonscroll 目次 1.対象読者 2.モーダルの構成 3.つっかえ棒で簡単解決 4.まとめ 5.追記 1. 対象読者 ↓ モーダルの後ろがスクロールされてしまう人 2. モーダルの構成 /* index.html */ <main id="container"> <div class="modalWrapper"> <div class="modal"> <header>ヘッダー</header> <p>今日も頑張ろう</p> </div> </div> </main>

[seal2501]

影つけてるdivのheightを100vhではダメなのかな。後で試そ。あとモーダルはdialogタグにして欲しい