Question

我在移动iOS游戏中遇到问题，在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>

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

iOS移动版：在可滚动的父级

1 个答案: