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

Question

我发现了一个看起来是iOS Safari中的错误（我在iOS 8上测试）。当绝对定位的iFrame浮动在可滚动内容上方时，滚动iFrame也会滚动底部的内容。以下HTML (在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"/>

在iOS 8 Safari中加载JSFiddle，然后在绿色框的左上角附近触摸拖动，其中写着“拖到这里！”（开始拖动时，您的手指完全在绿色框内，但也覆盖了下面的红色框。）您将看到红色框滚动而不是绿色框，如此图像所示：

相比之下，如果您在绿色框内开始拖动但不重叠红色框，则绿色框将如预期般滚动。

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

更新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上进行了测试，在两种情况下，当你拖动绿色框时，红色框会滚动。安德鲁的答案中描述的解决方法在这种情况下似乎没有帮助（或者至少我无法使其起作用）。

- Rand Scullard

---

看起来在iOS 7 Safari中也会出现这种情况。你找到解决方案/变通方法了吗？ - Jake Stoeffler

刚遇到了这个问题 - 你找到任何解决方法了吗？ - Andrew

Answer 1

我发现了这篇文章，其中提供了一种对我有点用的解决方案。

你需要使用以下样式来包装你的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包含一堆表单字段有关。

- Andrew

---

我同意它有点起作用，并在 iframe 中引入了一些时髦的滚动行为。我们在应用程序中还没有进行足够的测试来决定是否治疗比疾病更糟糕。 - Rand Scullard

另外，请查看我对原问题的更新。 - Rand Scullard