overflow時に惰性スクロールを有効にする

Pocket
2 interests

以下のようなCSSを組むと、iframe風のボックスを作ることができます。中のコンテンツがオーバーフローするときには、それをスクロールさせることができます。

iPhoneやiPad等のiOSで、このボックス内でネイティブアプリのような惰性スクロール(はじくようにフリックしたときに、スルスルっとスクロールする動き)を有効にしたい場合は、以下のように -webkit-overflow-scrollingプロパティに touchを指定しましょう。

Androidでは期待通りには動かないようです。JavaScriptで実装している例をいくつか見かけました。今回は、iOSだけでよかったので、これで対応しました。以上メモです。

Pocket
2 interests