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

いくつかの解決策

ググってみると皆さん試行錯誤してるなーって感じでいくつか対策的なものがでてきますが、ベストプラクティスは見つけられませんでした。

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

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

これPCだと概ねうまくいくようですが、iOSでは期待通りにいきません..。

※2019/03/01時点

preventDefaultを上手に使う

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

モーダルウィンドウ内をスクロールさせる必要がなければ、一つの手かもしれません。

position を上手く使う

個人的にはこれが理想に近い動きができました。

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

まとめ

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