Javascript 修复iOS/iPad 2中的溢出内容滚动

我有一个问题，我无法让safari移动浏览器在iframe上滚动，而不是扩展文档以显示完整内容

在上下文中，我有一个文件概述如下-

当我尝试在nav.html上水平滚动时，它被设置为

overflow-x:scroll

和“-webkit overflow scrolling:touch；”。在iPad2上进行iOS7测试时，这些都不起作用。我也尝试过在iOS模拟器中进行测试，但仍然没有成功

我遇到的问题在这里的产品页面上-

上面的链接是一个iFrame，包装了主网站的主体。在主网站中，我们有一个index.html页面，其中包含2个iFrame容器。1个用于产品（iframe[name='viewer']），另一个用于导航（iframe[name='nav']）。我已经将overflow:auto设置为查看器iframe，它似乎正在处理overflow-y内容。对于nav，内容会超出设置宽度的容器，并溢出整个文档，而不仅仅是nav iFrame中

div.nav

上的nav

这是我的index.html标记，包含两个iFrame（product/[product_number].html和nav.html）-

返回

如果有人知道1）是什么导致了这个问题，以及2）什么是解决这个问题的有效方法，我将非常感谢您的帮助

仅供参考：该域名是我们机构的测试域名，但请谨慎使用（我被告知它看起来像病毒……不是我们的本意）

提前谢谢

编辑：

---

多亏了，我所需要做的就是将导航iFrame的宽度设置为宽度：100%。我还将iFrame包装在包装div中，该div具有

overflow-x:scroll

和

-webkit溢出滚动：触摸溢出对帧没有影响。将框架宽度设置为始终适合屏幕的宽度（例如100%）。然后，一旦框架内的内容开始占据超过其可用宽度或高度，滚动将自动触发（假设您在iframe上设置了
scrolling=“yes”
属性）

对于iOS，您还需要一个带有一些特殊CSS的包装DIV：

.iframe-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
}

<div class="iframe-wrapper">
    <iframe scrolling="yes" width="100%" height="200px"></iframe>
</div>

使用iFrame有什么原因吗

您的“查看器”比您的内容大，因此如果我正确理解您的术语，它将不会滚动。建议您交换高度。此外，您的内容（img、文本等）需要位于父包装器内。如果它们位于同一DOM级别，则两者之间存在关系，因此不滚动

范例

HTML

目前我无法测试这一点，但我强烈建议不要对此类内容使用框架。如果可以，请将所有标记存在一个页面中，并使用ajax而不是链接目标更改页面。此外，
溢出对框架没有影响。请将框架宽度设置为较小的值（
100%
）如果框架中的内容变得更宽，滚动将自动触发。Rad，我刚刚在iFrame上将宽度设置为100%，它就工作了。感谢您的帮助！如果您想发布解决方案，我将接受它作为正确答案。
.iframe-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
}

<div class="iframe-wrapper">
    <iframe scrolling="yes" width="100%" height="200px"></iframe>
</div>

$('#main').load('products/P-715.html');
$('#nav').load('nav.html');

<div class="viewer"> 
  <div class="content"></div>
</div>

div.viewer {
    width:                              2000px;  
    height:                             500px; 
    overflow-x:                         scroll;
}

div.content {
    width:                              2000px;  
    height:                             1000px; 
}