2020年06月16日WebサイトやWebアプリ制作でネイティブっぽい動きをするモーダルウィンドウ、ポップアップをコーディングした際にiOSで背景要素まで一緒にスクロールしてしまう問題について。上手く使うまとめいくつかの解決策ググってみると皆さん試行錯誤してるなーって感じでいくつか対策的なものがでてきますが、ベストプラクティスは見つけられませんでした。html要素とbody要素にoverflow:hiddenを入れるこれPCだと概ねうまくいくようですが、iOSでは期待通りにいきません..。※2019/03/01時点preventDefaultを上手に使う単純にpreventDefault()を使うと全ての要素でスクロールしませんので、モーダルウィンドウ以外の要素をスクロールさせたい要素に使う感じですが、うーんなんか上手くいかない。モーダルウィンドウ内をスクロールさせる必要がなければ、一つの手かもしれません。上手く使う個人的にはこれが理想に近い動きができました。モーダルさせたらモーダル要素をrelativeにして、モーダルさせる前の通常の要素をabsoluteに。モーダルを閉じたらそれを元に戻す。CSSで制御できるのでまあまあでしょうか。まとめ他にもいろいろ方法ありそうなので、引き続き模索してみます。Webエンジニアプロスケートボーダーとしてデモやスクール、撮影などを行う傍ら、Webサービスの開発・運営など行うWebエンジニアとしても活動中。