iframe水平滚动不在iOS上渲染 [英] iframe horizontal scrolling not rendering on iOS

问题描述

我正在开发一个iOS HTML 5的webapp，需要显示一个大页面有很多文本。 iframe似乎是正确的工具，因为它允许滚动以查看小屏幕上的内容。使用iOS 5+和 overflow：auto; -webkit溢出滚动：触摸; 在iframe的风格我可以得到工作滚动在iPhone上的iframe。

问题是，当水平滚动以查看更多框架内容时，框架为空白，向下滚动可按预期工作。我怀疑问题出在固定的视口标签：

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

我有iframe设置如下：

 < div id =framecontstyle =height：auto; width：auto; overflow：auto; -webkit- overflow-scrolling：touch;> 
< iframe height =100％id =iframescrolling =nowidth =100％>< / iframe> 
< / div> 
  

对于iframe的替代方案或内容绘图问题的解决方案的任何建议将非常感谢。

解决方案

更好的方法是使用div。我测试了你的代码和iframe似乎不允许水平滚动。

除非你需要从外部页面获取内容（因为这是iframe是），这应该工作：

 < meta name =viewportcontent =width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = no; /> 
< div id =framecontstyle =background-color：red; height：200px; width：200px; overflow：auto; -webkit-overflow-scrolling：touch;> 
< div class =insidestyle =background-color：blue; width：400px;> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Aenean luctus tempus enim，ut ornare enim aliquet等。 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 utum。 um。。。。。。。。。。。。。 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 的宽度，如果这是您希望内容滚动到多长时间，然后您就可以滚动该数量。

I'm developing a iOS HTML 5 webapp and need to display a large page with lots of text. A iframe seems the right tool as it allows scrolling to view the content on a small screen. Using iOS 5+ and overflow: auto; -webkit-overflow-scrolling:touch; in the iframe's style I can get working scrolling in a iframe on the iPhone.

The issue is that when scrolling horizontally to view more of the frames content the frame is blank, scrolling down works as expected. I suspect that the problem lies in the fixed viewport tag:

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

I have the iframe setup is follows:

<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>

Any advice on alternatives to the iframe or a solution to the content drawing issue would be greatly appreciated.

解决方案

A better way to do this would be to use a div. I tested out your code and iframes do not seem to allow horizontal scrolling at all.

Unless you need to get the content from an external page (as that's what iframes are for), this should work:

<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>

The viewport is set (I only included this because I had it on my test page) so that page scrolling is disabled. The #framecont div is like a container, with a set width and height. The inside div, .inside, acts as the direct container to the content. The width is set to a greater width than the parent div, so that it will scroll horizontally so you can see the rest of what's in the div.

You do not need to set the height of the second div as it will fill 100%. You could for instance, set the second div to a width of 1000px, if that's how long you wanted the content to scroll to, and then you would be able to scroll that amount.

这篇关于iframe水平滚动不在iOS上渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！