5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

サイトを作っていて、スマホでのスクロールが綺麗にできない場合の対処法

Posted at

はじめに

スクロールが出る画面を作成してた際に、スマホでのスクロールの滑り(?)が悪く、なんでや!?と思ったので共有。

状況

ページ内コンテンツでスクロールができるアイテムを設置。
PC表示では特に気になる点はなかったが、スマホで確認していた際、スクロールの滑りが悪く、さっと指を動かしても、すぐにスクロールの動きが止まってしまう状態に。
滑らかじゃない!!動きが汚い!!使いづらい!!!!!!

原因

AppleはsafaciやwebViewに滑りの悪いスクロールをあえて設定しているらしい。(どうしてなんだ、Apple....)

対策

慣性スクロール(滑らかなスクロール)をするかどうかの制御をする場合はスクロールができる要素(外側)に以下をつける

div{
  -webkit-overflow-scrolling: touch;
}

これだけで、動きがスムーズになり、問題解決しました。
同じ問題で困っている人がいたら、試してみてください。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?