iOS 移动设备：在可滚动父级内的 iFrame 中滚动答案

【问题标题】：iOS mobile: scrolling in iFrame within scroll-able parentiOS 移动设备：在可滚动父级内的 iFrame 中滚动
【发布时间】：2017-11-09 10:44:48
【问题描述】：

我在移动 iOS Safari 中遇到问题，在 iFrame 本身内部拖动时，无法在包含 iFrame 的 div 中滚动：

#outside{
height: 400px;
width: 200px;
background: blue;
overflow: scroll;
}

.space{
  height: 200px;
  width: 200px;
  background: red;
}

iframe{
height: 1000px;
width: 200px;
background-color: green;
}

The green section is the iFrame.... Scrolling on the green section in iOS mobile is the issue

<div id="outside">
<div class="space"></div>
<iframe>

</iframe>
<div class="space"></div>
</div>

所以，在 iFrame 上拖动时，由于它没有滚动，它应该滚动父级，而是滚动整个页面。

此错误的任何已知解决方法？它已经在 Android 上运行。

【问题讨论】：

小提琴链接：jsfiddle.net/hpo2dg6d/1
将pointer-events: none; 添加到 iFrame 元素可以解决问题，但这不是一个选项，因为 iFrame 包含需要正常工作的链接。 :P
这是 Chris Coyier 最近发表的一篇我觉得很有趣的文章：blog.codepen.io/2017/12/01/stupid-iframes-stupid-ios

标签： html ios css iframe mobile-safari

【解决方案1】：

将您的<iframe>s 放入带有-webkit-overflow-scrolling: touch; 的包装器中

.iContainer {
  -webkit-overflow-scrolling: touch;
}

#outside {
  height: 400px;
  width: 200px;
  background: blue;
  overflow: scroll;
}

.space {
  height: 200px;
  width: 200px;
  background: red;
}

iframe {
  height: 1000px;
  width: 200px;
  background-color: green;
  border: none;
  display:block;
}

iContainer {
  -webkit-overflow-scrolling: touch;
}

The green section is the iFrame.... Scrolling on the green section in iOS mobile is the issue

<div id="outside">
  <div class="space"></div>
  <div class="iContainer">
    <iframe>
    </iframe>
  </div>
  <div class="space"></div>
</div>

特别说明：在<body> 上将此与position:relative 结合使用会导致IoS 设备有时会阻止滚动。让它完全从它的“反弹”中恢复可以修复它，但它仍然感觉错误和错误。
所以请确保您的<body> 或<html> 上没有任何设置position。最近花了我一些时间来调试这个。

【讨论】：

谢谢！我离解决问题越来越近了。我会接受您的回答，因为它完全回答了原始问题。但是，我没有提到包含的 div 实际上是 Bootstrap Modal，这似乎增加了进一步的复杂性：jsfiddle.net/hpo2dg6d/7
据此线程中的几个人说：github.com/twbs/bootstrap/issues/14839 添加-webkit-overflow-scrolling: touch 与引导模式不兼容:(
我认为未来十年你将无法在所有设备上滚动包含<iframe> 的模式。我们可能已经走过月球，但人类能做的事情是有限度的。以上就是其中之一。它归结为所有尊重网络标准的浏览器。这不会很快发生，恕我直言。
lol - 实际上，它目前适用于移动 iOS 浏览器之外的所有浏览器。在 iOS 移动设备上，如果我在容器上有 -webkit-overflow-scrolling: auto;，在 iFrame 上有 pointer-events: none;，它就可以工作，但是这个解决方案对我不起作用，因为 iFrame 包含的可变内容通常具有需要工作的链接。 :P 我会继续寻找可能的解决方案。您的回答帮助我了解了 iOS 移动浏览器的一些古怪行为。