11
11

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.

-webkit-overflow-scrolling と慣性スクロールの考察

Last updated at Posted at 2015-10-11
CSS
-webkit-overflow-scrolling: touch;

Cocoa Touch では UIScrollView の減速率は UIScrollViewDecelerationRateNormal がデフォルトなので、明示的に UIScrollViewDecelerationRateFast を設定しない限りは Safari のような滑りの悪い慣性スクロールは実現し得ないのですが、Apple は Safari や WebView には滑りの悪いスクロールをあえて設定しているようで、Web のユーザーはこのスクロールしづらい体験を強いられています。アプリであれば Objective-C / Swift 向けの API で慣性スクロールの制御ができますが、Web の世界からはこれに触ることができません。だからといって「オレオレ慣性スクロール/オレオレバウンスバック」なんてものを採用しても iOS のそれとは大きく異なるので、体験・体感を余計に悪くするだけです。

この CSS は慣性スクロールができるようになるだけでなく、「iOS ネイティブアプリと同じ慣性スクロール」を Web の世界だけで適応できるようになります。

ただしこの CSS は iOS の実装にいろいろバグがあるようで、諸刃の剣にも思えます。稀にスクロールがうまくいかなくなったりスクロールインジケータが消滅する、ステータスバータップによる ScrollToTop が効かなくなるといったバグ(あるいは現象)を許容できるなら採用しても良いかもしれません。

11
11
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
11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?