Ipad Safari-Can'；如果在iframe内滚动，则不能滚动页面

即使在iframe内触摸，也可以继续滚动网页吗？这个问题只发生在iOS设备上，我找不到任何解决方案

我的当前页面中有一个宽度为95%的FrRAME，大约为500 px的高度，所以当我到达iFrAME时，我不能再滚动（除非我接触到非常接近的边）。

---

谢谢

听起来iframe接收的是用户的滚动事件，而不是页面。当iframe的部分内容不符合iframe元素的大小时，可能会发生这种情况

此问题的解决方案是停止iframe尝试滚动。实现这一点的方法很少：

在iframe的HTML中，添加以下CSS：

如果您无法访问iframe的HTML（因为iframe可能正在加载第三方的内容），您可以在iframe周围放置一个包装div，并禁止以这种方式滚动。将此添加到父页面HTML：

您可以将其添加到父页面HTML CSS中，以使浏览器使用momentum，从而最终滚动到iframe的底部，然后滚动页面：

将传统的“滚动”属性添加到iframe以阻止iframe尝试滚动：

---

在我的例子中，我可以完全访问iframe并动态插入其内容。尽管如此，布兰登提出的解决方案没有一个奏效。我的解决方案：

• 创建覆盖iframe的透明div
• 捕获覆盖上的任何单击事件，并在iframe中复制它们（以允许用户单击链接/按钮）

这是因为覆盖div是外部文档的一部分，使其正常响应触摸/点击事件，并防止用户直接与iframe内容交互

---

Html模板：

<div style="position: relative;">
    <div
        style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;"
        ng-click="$ctrl.handleOverlayClick($event)"
    ></div>
</div>

---

也遇到了这个问题。你找到解决办法了吗？我们认为，为我们网站的用户“修复”的唯一方法是避免使用iframe。你解决了这个问题吗？这也发生在Safari iOS上吗？

   *{
        -webkit-overflow-scrolling: touch
    }

<div style="position: relative;">
    <div
        style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;"
        ng-click="$ctrl.handleOverlayClick($event)"
    ></div>
</div>

...

constructor ($document, $element) {
  this.iframe = $document[0].createElement('iframe');
  this.iframe.width = '100%';
  this.iframe.height = '100';
  this.iframe.sandbox = 'allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation';
  const element = $element[0].children.item(0);
  element.appendChild(this.iframe);
  this.contentDocument = this.iframe.contentDocument;
}

handleOverlayClick ($event) {
  // Overlay element is an invisible layer on top of the iframe. We use this to
  // capture scroll events which would be in the iframe (which don't work properly on iPad Safari)
  // When a click is detected, we propigate that through to the iframe so the user can click on links
  const rect = $event.target.getBoundingClientRect();
  const x = $event.clientX - rect.left; // x position within the iframe
  const y = $event.clientY - rect.top;  // y position within the iframe

  // triggering click on underlaying element
  const clickedElement = this.contentDocument.elementFromPoint(x, y);
  clickedElement && clickedElement.click();
}