iframe水平滾動不在iOS上呈現

Question

我正在開發一個iOS HTML 5 web應用程序，並且需要顯示包含大量文本的大頁面。 iframe似乎是正確的工具，因爲它允許滾動查看小屏幕上的內容。在iframe的風格中使用iOS 5+和overflow: auto; -webkit-overflow-scrolling:touch;我可以在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> 

替代品的iframe或到內容繪圖解決方案有什麼建議問題將不勝感激。

Answer 1

更好的方法是使用div。我測試了你的代碼和內聯框架似乎不允許水平滾動。

除非你需要從外部網頁內容（如這就是I幀是），這應該工作：

<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，.inside，充當內容的直接容器。寬度設置爲比父div更大的寬度，以便它將水平滾動，以便您可以看到div中剩下的內容。

您不需要設置第二個div的高度，因爲它會填充100％。例如，您可以將第二個div設置爲1000px的寬度，如果這是您希望內容滾動到多長時間，那麼您可以滾動該數量。

Answer 2

我強烈建議在這種情況下使用iScroll庫。您將更好地控制滾動行爲以及佈局。