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 がきかない場合: おちエンのブログ