overflow時に惰性スクロールを有効にする
以下のようなCSSを組むと、iframe風のボックスを作ることができます。中のコンテンツがオーバーフローするときには、それをスクロールさせることができます。
|
1 2 3 4 5 |
#box { width: 100%; height: 200px; overflow: auto; } |
iPhoneやiPad等のiOSで、このボックス内でネイティブアプリのような惰性スクロール（はじくようにフリックしたときに、スルスルっとスクロールする動き）を有効にしたい場合は、以下のように -webkit-overflow-scrollingプロパティに touchを指定しましょう。
|
1 2 3 4 5 6 |
#box { width: 100%; height: 200px; overflow: auto; -webkit-overflow-scrolling: touch; } |
Androidでは期待通りには動かないようです。JavaScriptで実装している例をいくつか見かけました。今回は、iOSだけでよかったので、これで対応しました。以上メモです。