Question

即使您在iframe内部触摸，是否可以继续滚动浏览网页？这个问题只发生在iOS设备上，我无法找到任何解决方案！

我当前的页面中间包含一个iframe，宽度为95％，高度约为500px，所以当我到达iframe时我不能再滚动（除非我非常靠近两侧）。

由于

Answer 1

就我而言，我可以完全访问iframe并动态插入其内容。尽管如此，Brandon S建议的解决方案都没有奏效。我的解决方案：

创建一个覆盖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>

控制器（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();
}

Answer 2

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

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

在iframe的HTML中，添加此CSS：


    html, body {
        overflow: hidden
    }

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

<div style="overflow: hidden"><iframe src="example.com"></iframe></div>
您可以将其添加到父页面HTML CSS以使浏览器使用动量，以便最终滚动到iframe的底部，然后滚动页面：


   *{
        -webkit-overflow-scrolling: touch
    }

添加遗产＆＃34;滚动＆＃34;属于iframe以阻止iframe尝试滚动：

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

Ipad Safari - 如果在iframe内滚动，则无法滚动页面

2 个答案: