iOS 移动设备：在可滚动父级内的 iFrame 中滚动
Posted
技术标签:
【中文标题】iOS 移动设备：在可滚动父级内的 iFrame 中滚动【英文标题】：iOS mobile: scrolling in iFrame within scroll-able parent 【发布时间】：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
【参考方案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 移动浏览器的一些古怪行为。以上是关于iOS 移动设备：在可滚动父级内的 iFrame 中滚动的主要内容，如果未能解决你的问题，请参考以下文章
使用 Firebug，我可以看到父级内的 HTML<Div> 部分，当我使用 Selenium 获取基于 html 源的 <div id> 时，我看不到子级