私は iPad Web アプリを作成しています。クライアントは、iPad 設定アプリのように、2 つのペイン (両方とも別々にスクロール) を使用したいと考えています。古いバージョンの iOS との互換性を維持しながら、これを行う最善の方法は何ですか?
ありがとう!
編集:ややネイティブに見えるはずであることを忘れていたので、2本指のスクロールはありません。
私は iPad Web アプリを作成しています。クライアントは、iPad 設定アプリのように、2 つのペイン (両方とも別々にスクロール) を使用したいと考えています。古いバージョンの iOS との互換性を維持しながら、これを行う最善の方法は何ですか?
ありがとう!
編集:ややネイティブに見えるはずであることを忘れていたので、2本指のスクロールはありません。
<div>
これは、2つの要素がそれぞれ画面の50%を占めるようにし、それらのオーバーフローを個別に制御してスクロールすることで、非常に簡単に実行できます。
最も単純なcssでは、次のようなもので十分です。
#left{
width:50%;
height:300px;
float:left;
overflow-y:scroll
}
#right{
width:50%;
height:300px;
float:left;
overflow-y:scroll
}
左側と右側を個別に制御できるように、これらを別々に保持しました(つまり、左側を40%、右側を60%にするか、左側を固定して右側をスクロールする必要があります)。
これがこの動作を示すjsfiddleです:http://jsfiddle.net/tFJeS/1/
2 つのコンテナー要素 (DIV など) を使用して、次のスタイルを使用できます。
#first,
#second {
float: left;
height: 500px; // or whatever fits your needs
width: 50%;
overflow-y: scroll
}
iOS ではオーバーフロー コンテンツを Web アプリケーションで使用する場合は 2 本の指でスクロールする必要があり、ネイティブ アプリケーションのように 1 本の指でスクロールすることはできません。Safari Web コンテンツ ガイドも参照してください。