iOSでモーダルウィンドウの背景要素がスクロールしてしまう問題

モバイル対応のWebサイトやWebアプリ制作でネイティブっぽい動きをするモーダルウィンドウをコーディングした際に背景要素がスクロールしてしまう問題。

いくつかの解決策!?

ググるとみんな試行錯誤してるなーって感じでいくつか対策的なものはありますが…

とりあえず色々試してみる。

html要素とbody要素にoverflow:hiddenを入れる

これPCだと概ねうまくいくようですが、iOSでは効きませんでした。※2019/03/01時点

preventDefaultを上手に使う

単純にpreventDefault()を使うと全ての要素でスクロールしませんので、モーダルウィンドウ以外の要素をスクロールさせたい要素に使う感じですが、うーんなんか上手くいかない。書き方が悪いかもしれませんが、preventDefault()はあまり使いたくないですね。

position を上手く使う

個人的にはこれが一番良いかも。

モーダルさせたらモーダル要素をrelativeにして、モーダルさせる前の通常の要素をabsoluteに。モーダルを閉じたらそれを元に戻す。CSSだけで制御できるのでまあまあでしょうか。

まとめ

他にもいろいろ方法ありそうなので、引き続き模索してみる。