overflowで要素内をスクロールさせると、iPhoneやiPadなどのiOSで見た場合にスクロールがぎこちなくなります。
そんな時は、iOS 5.0より実装されたSafari CSSの-webkit-overflow-scrollingプロパティを使うことで、iOSでもスムーズなスクロール（慣性スクロール）を実現できるようになります。
-webkit-overflow-scrolling の指定
-webkit-overflow-scrollingに指定する値は「auto」と「touch」の2つです。「auto」はデフォルト値で、慣性スクロールしません。
指定した高さの要素内をoverflow: scrollで滑らかなスクロールさせるためには、以下のように-webkit-overflow-scrolling : touchを指定します。
|
1 2 3 4 5 |
.content { height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch } |
iPhone3GS、iPhone4などで動きがガタツク場合
【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！の記事で紹介されていましたが、コンテンツにGPUアクセラレーションを効かせるために、以下の指定を入れると良いようです。|
1 2 3 |
div.contents-ga-overflow-suruyo > * { -webkit-transform: translateZ(0px); } |
コメント