【CSS/JavaScript】iOS（iPhone）でモーダルウインドウの背面をスクロール禁止にする

モーダルウインドウなど全画面表示かつ背面を固定したい場合、PCだとbodyにoverflow:hidden;を指定することでスクロールしないようにすることができますが、iPhoneで確認するとスクロールができてしまっています。
なので別の方法で固定します。

CSS

トリガーをクリックしたとき、bodyに.modal-openを付与する想定です。
position: fixed;を指定して、topの値をスクロール値に設定します。

.modal-open{
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

JavaScript

仮でtriggerというidを設定し、triggerをクリックした時にモーダルを出す処理です。

CSSの方をposition fixedにすることで強制的にスクロールできないようにしていますが、それだけだと位置が一番上に来てしまいます。
なのでJavaScript側で現在のスクロール値を「top」に設定し、スクロール位置があたかもそのまま固定されているように見せています。

const trigger = document.getElementById('trigger');
let scrollTop = 0;
 
trigger.addEventListener('click', () => {
  if (document.body.classList.contains('modal-open')) {
    // スクロール開放
    document.body.style.top = '';
    document.body.classList.remove('modal-open');
    window.scrollTo(0, scrollTop);
  } else {
    // スクロール禁止
    scrollTop = window.scrollY;
    document.body.style.top = (scrollTop * -1) + 'px';
    document.body.classList.add('modal-open');
  }
});