Roroa.

こんにちはkazukiです。
iphone（スマホサイズ）で要素内スクロールをさせたい時、PCでは滑らかなのに実機で見るとカクカクしてる？動きがシャープしている時があります。

そんな時、滑らかにする・慣性をつけるcssをメモしておきます。

コード

htmlとcssはこのようにします。

<div class="window">
	<p>テキストです〜</p>
	<p>テキストです〜</p>
	<p>テキストです〜</p>
	<p>テキストです〜</p>
</div>

.window {
	overflow-y: auto;
	height: 300px;
	-webkit-overflow-scrolling: touch;
}

説明

window要素の高さを固定し、その中の要素が300px以上になった（はみ出した）場合、縦方向にだけ（overflow-y なので）スクロールさせるというcssです。

これを滑らかにしたい場合は、overflowのかかっている要素に-webkit-overflow-scrolling: touch;を加えてあげます。

そうすると、実機で見た時にいい感じにスルスルーっとなってくれます！