iPad Safari - 在iframe内滚动时无法滚动页面

Question

如果你在iframe内部触摸屏幕，是否仍然可以继续滚动网页？这个问题只会在iOS设备上出现，并且我找不到任何解决方法！

我的当前页面中间包含一个宽度为95%，高约500像素的iframe，因此当我到达iframe时，无法再滚动（除非我非常靠近两侧触摸）。

谢谢

- Diogo Mendonça

---

你也遇到了这个问题吗？你找到解决方案了吗？我们认为，为了我们网站的用户，“修复”的唯一方法是避免使用 iframe。 - dprothero

你解决了吗？这个问题在Safari iOS上也出现了吗？ - muecas

Answer 1

在我的情况下，我可以完全访问iframe并动态插入其内容。然而，Brandon S建议的解决方案都无法解决问题。我的解决方案是：

• 创建一个透明的div覆盖在iframe上。
• 捕获覆盖层上的任何点击事件，并在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>

控制器（AngularJS组件）

...

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();
}

- Constablebrew

Answer 2

似乎iframe接收到了用户的滚动事件，而不是页面。这可能发生在iframe的某些内容超出了iframe元素的大小时。

解决此问题的方法是阻止iframe尝试滚动。有几种方法可以实现：

1. 在iframe的HTML中添加以下CSS：

    html, body {
        overflow: hidden
    }

2. 如果您无法访问iframe的HTML（因为可能iframe正在加载第三方内容），您可以在iframe周围添加包装器div并以这种方式禁用滚动。将以下内容添加到父页面HTML中：

   <div style="overflow: hidden"><iframe src="example.com"></iframe></div>

3. 您可以将以下内容添加到父页面HTML CSS中，以使浏览器使用动量，以便最终滚动超过iframe底部，然后滚动页面：

   *{
        -webkit-overflow-scrolling: touch
    }

4. 为iframe添加传统的“scrolling”属性，以防止iframe尝试滚动：

   <iframe src="example.com" scrolling="no"></iframe>

- Brandon S