モーダルウィンドウなどを実装した際に、ページ全体のスクロールを禁止させたいという場面がよくあります。
追記：以前まで、PCやAndroidでは比較的簡単に実現させることができましたが、iOS Safariでは別の方法を使わなければうまくいきませんでした。
「overflow:hidden;」を使えば簡単にできそうですが、実はこれは iOS Safari ではうまくいきません。
iOSにおけるモーダルの背景固定が簡単になりました。
bodyタグに「overflow:hidden;」を設定
ウィンドウサイズを固定して、スクロールさせたくないサイトを制作するとき、<body>タグにoverflow:hidden;を効かせます。
body.is-modal {
overflow:hidden; /* モーダルウィンドウが開かれた場合にのみ動的する */
}
今まで、上記方法ではiOS端末だと背景固定できず、別の実装が必要でしたが、iOS 16 からは上記設定でも背景固定できるようになりました。
たった1行のコードで済むので便利ですね。
