2012年11月26日

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

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

#box {
    width: 100%;
    height: 200px;
    overflow: auto;
}

#box {

width: 100%;

height: 200px;

overflow: auto;

}

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

#box {
    width: 100%;
    height: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#box {

width: 100%;

height: 200px;

overflow: auto;

-webkit-overflow-scrolling: touch;

}

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

関連性の高い記事