CSS iOSでもスムーズなスクロール（慣性スクロール）を実現する
最近は「残業しない！」をモットーに仕事をしています。
みなさんこんにちは。
overflowを設定した要素をiphoneでスクロールしてみたら
手を離した瞬間に止まった！？
そんな時は「-webkit-overflow-scrolling」
iPhone(iOS)で慣性スクロールを有効にする
CSS
- -webkit-overflow-scrolling: touch;
これだけ！
プロパティの値は「touch」
これでiPhone(iOS)で慣性スクロールが有効になります。
初期値は「auto」なので、
iPhone(iOS)での慣性スクロールは無効となっています。
慣性スクロールを試してみる
ということで実際に指定して比べてみます。
CSS
- .foo {
- width: 200px;
- height: 200px;
- padding: 50px 0;
- overflow: auto;
- }
- .scroll {
- -webkit-overflow-scrolling: touch;
- }
- auto（未指定）
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- touch
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
はい、気持ちよく慣性が効いてますね。
iPhone(iOS)の慣性スクロールまとめ
iPhone(iOS) Safariではよく他のブラウザと違う挙動になることがあります。
今回の慣性スクロールもそういったブラウザ間の違いです
しかし、一度経験しておけば次に制作する際には
スムーズに作れるようになっているはず！
どんなトラブルも越えていけるように頑張っていきましょう〜