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

Question

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

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

在此处输入图片说明

当我尝试在nav.html上水平滚动时，将其设置为overflow-x: scroll和'-webkit-overflow-scrolling：touch;`。 在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 ='nav']），另一用于产品导航（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的宽度设置为width：100％。 我也将iFrame包裹在一个具有div overflow-x: scroll;的包裹div中overflow-x: scroll; 和-webkit-overflow-scrolling: touch; 。

Answer 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');

Answer 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; 
}

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-11-18 00:09:23

解决方案2
0 2014-11-18 00:09:25

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-11-18 00:09:23

解决方案2 0 2014-11-18 00:09:25

解决方案1
1 已采纳 2014-11-18 00:09:23

解决方案2
0 2014-11-18 00:09:25