スマートフォンでページの一部を慣性スクロールできるようにする-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