css にて overflow: scroll した領域をスマホで操作する時に滑らかなスクロールにする

下記のようなスクロール領域を用意する。

.scroll {
	height: 300px;
	overflow-x: scroll;
}

PC だと普通の挙動だけど、スマホで確認すると、
いつものようなヌルヌルしたスクロールではなくなる。

慣性スクロール

そのようなスムーズなスクロールを「慣性スクロール」という。
慣性スクロールを使うには overflow-scrolling: touch; を追加する。

.scroll {
	height: 300px;
	overflow-x: scroll;
	// スマホでのスクロールを滑らかにする
	overflow-scrolling: touch;
	// autoprefixer を入れてない方はこちら
	-webkit-overflow-scrolling: touch;
}