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

【问题标题】：Fixing Overflow Content scrolling in iOS/iPad 2修复 iOS/iPad 2 中的溢出内容滚动
【发布时间】：2014-11-17 22:24:48
【问题描述】：

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

对于上下文，我有一个这样概述的文档-

当我尝试在设置为overflow-x: scroll 和“-webkit-overflow-scrolling: touch;”的 nav.html 上水平滚动时。在 iPad 2 上的 iOS 7 中测试时，这些都不起作用。我也尝试在 iOS 模拟器中进行测试，但仍然没有运气。

我遇到的问题在此处的产品页面上 — http://idex-hs.viser.biz.dev.thevfiles.com/product-kiosk/v2-kiosk/index.html。

上面的链接是一个 iFrame 包裹了主网站的主体。在主网站中，我们有一个带有 2 个 iFrame 容器的 index.html 页面。 1 用于产品 (iframe[name='viewer'])，另一个用于导航 (iframe[name='nav'])。我有溢出：自动设置为查看器 iframe，它似乎正在处理溢出-y 内容。对于导航，内容会超出设置宽度的容器并溢出整个文档，而不仅仅是导航 iFrame 中 div.nav 上的导航。

这是我使用两个 iframe（product/[product_number].html 和 nav.html）的 index.html 标记 —

<body class="cat">
  <div class="back-nav-cat"></div>
  <!-- Navigation Links -->
  <div class="cat-navigation back" onclick="location.href='../index.html';">BACK</div>
  <!-- Viewer -->
  <iframe src="products/P-715.html" frameborder="0" name="viewer" width="2560" height="1195" scrolling="no"></iframe>

  <!-- Nav -->
    <iframe src="nav.html" frameborder="0" name="nav" width="2560" height="245" scrolling="yes" style="position: absolute;"></iframe>
</body>

如果有人知道 1) 导致此问题的原因，以及 2) 已证明可以解决此问题的方法，我将非常感谢您的帮助。

仅供参考：该域是我们机构的测试域，但请谨慎使用（有人告诉我它看起来像病毒......不是我们的意图）。

提前致谢。

编辑：

感谢Ryan Wheale，我只需将导航 iFrame 的宽度设置为宽度：100%。我还将 iFrame 包装在具有 overflow-x: scroll; 和 -webkit-overflow-scrolling: touch; 的包装 div 中。

【问题讨论】：

我目前无法对此进行测试，但我强烈建议不要将框架用于此类内容。如果可以的话，让所有标记都存在于一个页面中，并使用 ajax 而不是链接目标来更改页面。此外，overflow 对帧没有影响。将框架宽度设置为更小（100%），如果框架中的内容变得比这更宽，滚动将自动触发。
Rad，我只是在 iFrame 上将宽度设置为 100%，它就起作用了。感谢您的帮助！
如果您想发布解决方案，我将接受它作为正确答案。

标签： javascript jquery html css iframe

【解决方案1】：

overflow 对帧没有影响。将框架宽度设置为始终适合屏幕的宽度（例如 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>

我仍然认为，这种特殊的框架用例在 10 多年前就已经过时和过时，不应再使用。你可以相信我的话。像下面这样简单的东西应该可以工作。假设您使用的是 jQuery 并且您的 html 页面是静态的，您将需要创建一个 DIV 来代替您的每个 iframe - 为每个 DIV 提供一个 ID 而不是 NAME：

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

【讨论】：

【解决方案2】：

有使用 iframe 的理由吗？

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

例子

HTML

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

CSS

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

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

【讨论】：