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

Question

I have an issue where I can't get the safari mobile browser to scroll on an iframe VS extending the document to show the full content. 我有一个问题，我无法让safari移动浏览器在iframe VS上滚动以扩展文档以显示全部内容。

For context, I have a document outlined like this — 对于上下文，我有一个这样的文档概述-

在此处输入图片说明

When I try to scroll horizontally on nav.html which is set to overflow-x: scroll and '-webkit-overflow-scrolling: touch;`. 当我尝试在nav.html上水平滚动时，将其设置为overflow-x: scroll和'-webkit-overflow-scrolling：touch;`。 None of these work when testing in iOS 7 on the iPad 2. I also have tried testing in the iOS simulator and still no luck. 在iPad 2上的iOS 7中进行测试时，这些方法均无效。我也曾尝试在iOS模拟器中进行测试，但还是没有运气。

Where I'm having an issue is on the product pages here — http://idex-hs.viser.biz.dev.thevfiles.com/product-kiosk/v2-kiosk/index.html . 我遇到问题的地方在此处的产品页面上— http://idex-hs.viser.biz.dev.thevfiles.com/product-kiosk/v2-kiosk/index.html 。

The above link is an iFrame wrapping the body of the main website. 上面的链接是一个iFrame，其中包含主要网站的正文。 In the main website, we have an index.html page with 2 iFrame containers. 在主网站上，我们有一个带有2个iFrame容器的index.html页面。 1 for the product (iframe[name='viewer']), and another for the nav (iframe[name='nav']). 1用于产品（iframe [name ='nav']），另一用于产品导航（iframe [name ='nav']）。 I have overflow: auto set to the viewer iframe and it seems to be working on overflow-y content. 我有溢出：自动设置为查看器iframe，并且似乎在处理y内容。 for the nav, the content protrudes out of the set-width container and will overflow the entire document, not just the nav on the div.nav in the nav iFrame. 对于导航，内容将从设置宽度的容器中突出，并且将溢出整个文档，而不仅仅是导航iFrame中div.nav上的导航。

Here's my index.html markup with both iframes (product/[product_number].html and nav.html) — 这是我同时包含两个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>

If anyone has an idea of 1) what causes this issue, and 2) what is a proven fix for this problem, I would greatly appreciate the help. 如果有人知道1）导致此问题的原因，以及2）解决该问题的可靠方法，我将不胜感激。

FYI: the domain is a testing domain for our agency, but feel free to approach with caution (I've been told it looks like a virus.... not our intention). 仅供参考：该域是我们代理机构的测试域，但请谨慎对待（据告知，该域看起来像是病毒，...不是我们的意图）。

Thanks in advance. 提前致谢。

EDIT: 编辑：

Thanks to Ryan Wheale , all I needed to do was set the width of my nav iFrame to width: 100%. 多亏了Ryan Wheale ，我要做的就是将导航iFrame的宽度设置为width：100％。 I also wrapped the iFrame in a wrapping div that has overflow-x: scroll; 我也将iFrame包裹在一个具有div overflow-x: scroll;的包裹div中overflow-x: scroll; and -webkit-overflow-scrolling: touch; 和-webkit-overflow-scrolling: touch; . 。

Answer 1

overflow has no affect on frames. overflow对帧没有影响。 Set the frame width to something which will always fit on the screen (eg. 100%). 将框架宽度设置为始终适合屏幕的宽度（例如100％）。 Then, once the content inside of the frame starts to occupy more than its available width or height, scrolling will get triggered automatically (assuming you have the scrolling="yes" attribute set on the iframe. 然后，一旦框架内的内容开始占据超过其可用宽度或高度的范围，滚动就会被自动触发（假设您在iframe上设置了scrolling="yes"属性）。

For iOS, you will also need a wrapping DIV with some special CSS: 对于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>

I will still contend that this particular use case for frames became dated and archaic over 10 years ago and should not be used any more. 我仍然会争辩说，这种特殊的框架用例在10年前就已过时且过时，不应再使用。 You can take my word for it or not. 您可以信守我的诺言。 Something as simple as the following should work. 像下面这样简单的事情应该起作用。 Aassuming you are using jQuery and your html pages are static, you will need to create a DIV in place of each of your iframes - give each DIV an ID instead of NAME: 假设您使用的是jQuery并且html页面是静态的，则需要创建一个DIV来代替每个iframe-为每个DIV提供一个ID而不是NAME：

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

Answer 2

Is there a reason for using iframes? 使用iframe是否有理由？

Your "viewer" is larger than your content so it won't scroll if I understand your terminology correctly. 您的“查看者”大于您的内容，因此如果我正确理解您的术语，它将不会滚动。 Suggest you swap you heights around. 建议您调高身高。 Also, your content (img, text, etc) needs to be inside of a parent wrapper. 另外，您的内容（img，文本等）必须位于父包装内。 If they are on the same DOM level there is relationship between the two and as such no scrolling. 如果它们在同一DOM级别上，则两者之间存在关系，因此不会滚动。

Example 例

HTML HTML

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

CSS 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