-webkit-overflow-scrolling プロパティで overflow スクロール要素を iPhone ネイティブスタイルに

iOS 5.0でSafariのCSSに追加された「-webkit-overflow-scrolling」プロパティを使うと、JavaScriptなしでiPhoneネイティブスタイルのスクロールを実現できます。

属性値は「auto」と「touch」で、デフォルトは「auto」です。

「auto」は、フリックして指を離すとスクロールも止まります。「touch」は、指を離しても惰性スクロールします。

サンプル

CSSひとつで、惰性スクロールができると便利ですね。

これまでは、インラインスクロールは2本指でスクロールできましたが、iOS 5.0では1本指でスクロールできるようになったのも、ありがたいです。

ただ、iOS 4.xやAndroidには非対応ですし、サポートレベルも「開発中（Under development）」とのことなので、実用には時期尚早ですかね。