iOSでのレンダリングではないiframe水平スクロール

Question

iOS HTML 5 Webアプリケーションを開発しており、大量のテキストを含む大きなページを表示する必要があります。 iframeはスクロールして小さな画面でコンテンツを表示できるため、適切なツールのようです。 iOS 5+とoverflow: auto; -webkit-overflow-scrolling:touch;をiframeのスタイルで使用すると、iPhone上のiframeでスクロールが可能になります。

問題は、水平方向にスクロールしてフレームの内容をさらに表示すると、フレームが空白になり、スクロールダウンが期待通りに機能しないという問題があります。次の

<meta name="viewport" content="width=device-width; minimum-scale=1.0; initial-scale=1.0; user-scalable=yes">

私は、IFRAMEの設定がある持っている：私はこの問題は、固定ビューポートタグであることを疑う

<div id="framecont" style="height: auto; width: auto; overflow: auto; -webkit-overflow-scrolling:touch;"> 
    <iframe height="100%" id="iframe" scrolling="no" width="100%"></iframe> 
</div> 

インラインフレームまたはコンテンツの描画にソリューションに代わる上の任意のアドバイス問題は非常に高く評価されるだろう。

Answer 1

これを行うより良い方法は、divを使用することです。私はあなたのコードをテストし、iframeは水平スクロールを全く許さないようです。

あなたが（それは、アイフレームをためているものだとして）外部のページからコンテンツを取得する必要がない限り、これは動作するはずです：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> 
<div id="framecont" style="background-color:red; height: 200px; width: 200px; overflow: auto; -webkit-overflow-scrolling:touch;"> 
<div class="inside" style="background-color:blue; width: 400px;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus tempus enim, ut ornare enim aliquet et. Nunc porta porttitor dolor, ut pharetra augue venenatis et. Ut felis diam, consectetur a viverra a, auctor vel lorem. Ut tempor magna eget sem faucibus adipiscing condimentum ipsum tincidunt. Sed aliquam venenatis enim ut dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing ullamcorper tincidunt. Etiam fermentum arcu quis mi malesuada eget varius lorem convallis. 
</div> 
</div> 

ビューポートが設定されている（私は私にそれを持っていたので、私はこれだけを含めますページのスクロールが無効になります）。 #framecont divはコンテナのようなもので、幅と高さが設定されています。内側のdiv、.insideは、コンテンツの直接のコンテナとして機能します。幅は親divよりも大きい幅に設定されているため、div内にあるものの残りを見ることができるように水平方向にスクロールします。

2番目のdivの高さを100％に設定する必要はありません。たとえば、2番目のdivを1000pxの幅に設定することができます。コンテンツをスクロールする時間を指定すると、スクロールできるようになります。

Answer 2

この状況では、iScrollライブラリを使用することを強くお勧めします。レイアウトだけでなくスクロールの動作もより詳細に制御できます。