iOS Safari - 滚动 iFrame 导致下面的 div 滚动

Question

我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (available on JSFiddle)重现它:

<div style="width:200px;height:200px;overflow:auto;-webkit-overflow-scrolling:touch;">
    <div style="width:500px;height:500px;background-color:red">Test</div>
</div>
<iframe scrolling="no" style="position:absolute;z-index:10000;left:50px;top:50px;width:200px;height:200px" src="http://randscullard.com/LinkedItems/iOSFrameScrollIssue.htm"/>

加载the JSFiddle在 iOS 8 Safari 中，然后在绿色框的左上角附近触摸并拖动，上面写着“拖动到这里!” (开始拖动，使您的手指完全位于绿色框内，但也与下面的红色框重叠。)您将看到红色框滚动而不是绿色框，如下图所示:

相比之下，如果您在绿色框内开始拖动但不与红色框重叠，那么绿色框将按您预期的那样滚动。

我无法在任何其他浏览器中重现此行为。还有其他人遇到过这个问题吗？任何已知的解决方法？

2015-09-18更新

您不需要 iFrame 即可获得此行为。查看this JSFiddle ，它只使用 div:

<div style="width:200px;height:200px;overflow:auto;-webkit-overflow-scrolling:touch;">
    <div style="width:500px;height:500px;background-color:red">Test</div>
</div>
<div style="position:absolute;z-index:10000;left:50px;top:50px;width:200px;height:200px;background-color:green">Drag here!</div>

我在 iOS 8.4 和 9.0 上对此进行了测试，在这两种情况下，当您拖动绿色框时，红色框会滚动。 Andrew's answer 中描述的解决方法在这种情况下似乎没有帮助(或者至少我无法让它工作)。

Answer 1

刚找到这个post它有一个适合我的解决方案。

你必须有一个 div 包装你的 iframe 如下样式

-webkit-overflow-scrolling: touch;
overflow-y: scroll;

以及定位样式

该页面中的示例与我的工作类似:

.demo-iframe-holder {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}

就我而言，它仍然有点笨拙。有时我必须触摸 iframe 之外的东西才能再次滚动 iframe。似乎如果外部容器仍在滚动(例如 - 如果您刚刚轻弹页面并且它继续滚动一点)您无法滚动 iframe。我看到的一些奇怪现象可能还与我的 iframe 包含一堆表单字段这一事实有关。