Question

我遇到一个问题，即我无法通过Safari浏览器在iframe上滚动，扩展文档以显示完整内容。

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

enter image description here

当我尝试在nav.html上水平滚动时，设置为overflow-x: scroll和＆＃39; -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 =＆＃39; viewer＆＃39;]），另一个表示导航（iframe [name =＆＃39; nav＆＃39;]）。我有溢出：自动设置为查看器iframe，它似乎正在处理溢出内容。对于导航，内容突出于设置宽度容器，并将溢出整个文档，而不仅仅是导航iFrame中div.nav上的导航。

这是我的index.html标记，包含iframe（product / [product_number] .html和nav.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，我需要做的就是将nav iFrame的宽度设置为宽度：100％。我还将iFrame包装在包含overflow-x: scroll;和-webkit-overflow-scrolling: touch;。

的包装div中

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>

我仍然会争辩说，这个特殊的框架用例在十多年前变得陈旧和陈旧，不应该再使用了。你能不管我的意思。像下面那样简单的东西应该有效。假设你使用的是jQuery并且你的html页面是静态的，你需要创建一个DIV来代替你的每个iframe - 给每个DIV一个ID而不是NAME：

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

Answer 2

是否有理由使用iframe？

你的观众＆＃34;比你的内容大，所以如果我正确理解你的术语，它就不会滚动。建议你换掉你身高。此外，您的内容（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 个答案: