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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

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

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

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

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

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

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

index.css
-webkit-overflow-scrolling: touch;

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

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

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

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

慣性スクロールのサンプル

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

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

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

まとめ

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

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

ぜひ使ってみて下さい。

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

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

CSSのflexboxで横スクロールを実装する方法【CSS】flexboxで横スクロールを実装する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です