我正在开发一个iOS HTML 5 webapp,需要显示一个包含大量文本的大页面. iframe似乎是正确的工具,因为它允许滚动查看小屏幕上的内容.使用iOS 5和overflow：auto; -webkit溢出滚动：触摸;在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>
解决方法
更好的方法是使用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的宽度,如果这是您希望内容滚动到的时间长度,那么您将能够滚动该数量.
