モーダルウィンドウなどを実装した際に、ページ全体のスクロールを禁止させたいという場面がよくあります。

追記：以前まで、PCやAndroidでは比較的簡単に実現させることができましたが、iOS Safariでは別の方法を使わなければうまくいきませんでした。

「overflow:hidden;」を使えば簡単にできそうですが、実はこれは iOS Safari ではうまくいきません。

iOSにおけるモーダルの背景固定が簡単になりました。

bodyタグに「overflow:hidden;」を設定

ウィンドウサイズを固定して、スクロールさせたくないサイトを制作するとき、<body>タグにoverflow:hidden;を効かせます。

body.is-modal {
	overflow:hidden; /* モーダルウィンドウが開かれた場合にのみ動的する */
}

今まで、上記方法ではiOS端末だと背景固定できず、別の実装が必要でしたが、iOS 16 からは上記設定でも背景固定できるようになりました。

たった1行のコードで済むので便利ですね。