iOSでなめらかなスクロールを実装する方法【わずか1秒で慣性スクロールを実現】

2020/02/29

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

iOSでなめらかなスクロールを実現する方法を知りたい
overflow:scrollを指定した要素をiOSでスクロールすると手を離した瞬間に止まってしまう現象を修正したい
要素の高さをpxで指定し、overflow:scrollで幅に収まりきらないコンテンツをスクロールで見れるように実装しているんだけども、iOSだと動きがカクついてぎこちなくなるのを改善したい

という方のお悩みを解決します！

慣性スクロールを実装するには？

iOSでのスムーズなスクロールのことを慣性スクロールと呼びます。

なんだか小難しそうな名前がついていますが、実装するのは超簡単！

以下のcssをoverflow:scrollの要素に追記するだけです！

index.css

-webkit-overflow-scrolling: touch;

この-webkit-overflow-scrollingプロパティにはautoとtouchの２つの値を指定できます。

デフォルトはautoなので、慣性スクロールさせたい場合は、touchを指定してやります。

実際に指定する際は以下の形になりますね。

index.css

.Item{
  height: 32px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

実際にどんな挙動なのか確認できるようサンプルを作りました！

ぜひスマートフォンでスクロールしてみてください♪

See the Pen
mdJmZQb by 石森裕也 (@yuyaphotograph)
on CodePen.

たった一行コードを追加しただけでスマートフォンでのスムーズなスクロールが実現できちゃうってすごいですよね！

モバイルファーストな現代なので使用する機会はきっとあるはず！

ぜひ使ってみて下さい。

ECサイトでよく見かける横スクロールを実装してみたいんだけど、どうやって作ればいいの？

という方は以下の記事で解説しているのでチェックしてみてください〜