スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling

overflow でスクロールを許可してから -webkit-overflow-scrolling を設定すると
スマートフォンの画面からはみ出すコンテンツを、部分的に慣性スクロールするよう設定できます。
-webkit-overflow-scrollingの値をtouchにすると慣性スクロールできるようになり、autoにすると慣性スクロールを無効にできます。

Androidは慣性スクロールが効いていなかったので、-webkit-overflow-scrolling: auto; と同じ動作をします。

画面幅よりも横長なスペック表と、利用規約を模したサンプルを作ってみました。

サンプル

画面からはみ出すコンテンツの外側の要素へoverflow: scroll; と -webkit-overflow-scrolling: touch; を設定します

※スマートフォンで見てみてください。パソコンから見るとスクロールバーが出て残念な感じになります。

<div style="overflow: auto; -webkit-overflow-scrolling: touch; margin: 1em 0; padding: 1em;background:#eee;">
	<div style="width: 600px;">画面からはみ出すコンテンツの外側の要素へoverflow: scroll; と -webkit-overflow-scrolling: touch; を設定します</div>
</div>

対応環境

iOS 5+
Android 4+

この記事を書いた2013年11月現在の見解では
iOSのシェアはiOS 7がリリースされたとたん急激に塗り替えられ5以下は4%以下に落ちたので、iPhoneではほぼ使えると踏んでいいかなと思います。
Androidは2.3の生き残りがまだ無視できないので、ここをサポート対象外にできるかどうかが導入の極めポイントになりそうです。

動作検証済み端末

○ iPhone 4S iOS6
○ iPhone 5 iOS6
○ iPhone 5 iOS7
○ GALAXY SIII Android 4.1
○ Xperia SX Android 4.3
× GALAXY SII Android 2.3
× Xperia acro Android 2.3
× Xperia Xperia SO-01B Android 2.2

参考
-webkit-overflow-scrolling: touch がきかない場合: おちエンのブログ

Pocket

Share on Tumblr

関連記事