CSS
iOS

iOSで中スクロールが上手くいかない理由

iOS上のスクロールの挙動

中の要素でスクロールする場合にoverflow-y: scroll; -webkit-overflow-scrolling: touch;をセットすると思いますが、その時に動画のようにwindow自体がスクロールしてしまうことがあって中スクロールが上手くいかないことがあります。
下にどの状況を貼ります。iOS11.3のiPhone 8 Plusのものです。iOS10.3でも同じ現象を確認しました。

output2.gif

この動画を見ればわかると思いますが、中の要素のスクロールイベントの代わりに、windowの方のスクロールイベントが発生しているため中スクロールが上手くいっていません。今回はわかりやすくposition: absolute;で設定しているためwindowがスクロールした時にスクロール要素自体も動いているので変化がわかりますが、position: fixed;にした場合はスクロール要素は固定されたままなので変化に気づけずフリーズしているように見えてしまいます。

触ってみた感じだと、スクロールの終端で一旦止まると慣性スクロールがwindow側になり、スクロール中はwindow側でスクロールされてしまう感じです。終端にいなければ要素側のスクロールから始まるので、window側でスクロールされることはなさそうです(多分)。

デモページ、サンプルコード

デモページとサンプルコードは以下にあります。
デモページ
サンプルコード

終わりに

結局、中スクロールすると上手くスクロールされなくなる理由はわかりましたが、残念ながら解決方法まではわかりませんでした。
どうしてもやる場合はこの現象を理解した上で使うか、iScrollとか使ってJSでスクロール処理を書くことになるのかなと思いました。
できればこの問題はどうにかしたいので誰か解決方法を知っていたら教えていただけると大変助かります。

参考URL