旧iOS端末にも対応できるオーバーレイ背景スクロールさせない方法

今回は旧iOS(12,13など)にもオーバーレイ（モーダルウィンドウ）が表示されたときに
背面のコンテンツがスクロールされないように制御する方法をお伝えします。

他端末ではうまく処理できていて背面のコンテンツが静止するのに
iOS12ではうまく制御できないといった方に使える手法です。

まずはAndroid,iOS端末気にしない方向け

とりあえずスクロールさせないようにするには以下制御で解決します。

CSS

/* モーダルが開かれたときに設定 */
.body {
  overflow: hidden;
}

また最近ではoverscroll-behaviorが主要なブラウザでサポートされていますので
上記でも設定可能です。

iOS12でも背面コンテンツを制する

前述のみだとiOSでは独自の制御で以下のような動きが見られる時があります。

・上部、下部のアドレスバーが動いてしまい、ウィンドウが固定されない。
・iOS12だとoverscroll-behaviorがそもそもサポート外で機能しない。
・bodyだけの制御では背面コンテンツがスクロールできてしまう。

上記のような挙動を解決するために以下の設定を行ってください。

CSS

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* vhより%推奨 */
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  z-index: 10;
  overflow-y: scroll; /* 必須 */
  touch-action: none;　/* 必要であれば */
}

.overlay::before,
.overlay::after {
  content: "";
  width: 1px;
  height: calc(100% + 1px);
  display: flex;
}

height: calc(100% + 1px);の記述に関しては以下記事を参考にさせて実装致しました。
解説もありますので、どのような実装になっているか分かりやすいです。
【PC・スマホ両対応】CSSだけでモーダルの背景をスクロールさせない新しい方法（つっかえ棒式モーダル背景固定法）

注意
height: 100%の部分はiOS15だとアドレスバーが上下してオーバーレイで表示されたものが動いてしまうといった事象がありましたのでvhより%で対応しました。
必須や重要な部分以外においてはお好きなカスタマイズで設定ください。

中央に画像などを表示させたい場合は以下設定
align-items: center; justify-content: center;

スクロール背面静止できているか不安な方向け

JavaScript

document.querySelector('#openButton').addEventListener('click', overlayOpen);
document.querySelector('#closeButton').addEventListener('click', overlayClose);

フレームワークに合わせて、各種イベントの設定をHTMLにしてください。Vueでしたら@open="openButton"、ReactならonRequestClose={openButton}といった記述で設定可能です。

あとがき

正直かなり詰まった部分だったので、困っている方も多いかなと思い作成しました。
お役に立てていれば幸いです。