スマホ(iOS)でスムーズにスクロールできるようにする方法

overflowプロパティでscrollを指定したときに、スマホだとスクロールがぎこちない感じになります。

これは慣性スクロールになっていないためです。

慣性スクロールとは
画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のこと
慣性スクロールとは – IT用語辞典 Weblio辞書

指が画面から離れたときにスクロールが維持されずに止まってしまうことで、スクロールが少しぎこちない感じになるんです。

overflow-scrollingプロパティを使う

スクロールの動きを滑らかにするため、対象の要素にoverflow-scrollingプロパティで「touch」を指定すると慣性スクロールされるようになります。

「overflow-scrolling:touch;」を指定していない場合と、指定した場合の例を下に用意しました。

スマホでスクロールしたときの動きを確認してみてください。