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

Question

我在移动 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.

上工作

Answer 1

将您的 <iframe> 放入带有 -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设备有时会阻止滚动。让它完全恢复 "bounce" 修复它，但它仍然感觉错误和错误。
因此，请确保您的 <body> 或 <html> 上没有任何集合 position。最近花了我一些时间来调试它。

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

iOS mobile: scrolling in iFrame within scroll-able parent

html

css

iframe

mobile-safari

ios