はじめに
スクロールが出る画面を作成してた際に、スマホでのスクロールの滑り(?)が悪く、なんでや!?と思ったので共有。
状況
ページ内コンテンツでスクロールができるアイテムを設置。
PC表示では特に気になる点はなかったが、スマホで確認していた際、スクロールの滑りが悪く、さっと指を動かしても、すぐにスクロールの動きが止まってしまう状態に。
滑らかじゃない!!動きが汚い!!使いづらい!!!!!!
原因
AppleはsafaciやwebViewに滑りの悪いスクロールをあえて設定しているらしい。(どうしてなんだ、Apple....)
対策
慣性スクロール(滑らかなスクロール)をするかどうかの制御をする場合はスクロールができる要素(外側)に以下をつける
div{
-webkit-overflow-scrolling: touch;
}
これだけで、動きがスムーズになり、問題解決しました。
同じ問題で困っている人がいたら、試してみてください。