我正在开发一个iOS HTML 5 webapp，需要显示一个包含大量文本的大页面。 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替代方案的任何建议或内容绘图问题的解决方案将不胜感激。
答案 0 :(得分：4)
更好的方法是使用div。我测试了你的代码和iframe似乎根本不允许水平滚动。
除非您需要从外部网页获取内容（因为这是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中剩余的内容。
您不需要设置第二个div的高度，因为它将填充100％。例如，您可以将第二个div设置为宽度1000px，如果这是您希望内容滚动到的时间长度，那么您就可以滚动该数量。
答案 1 :(得分：1)
我强烈建议在这种情况下使用iScroll库。您可以更好地控制滚动行为以及布局。