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

Question

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

我当前的页面中间包含一个iframe,宽度为:95%,高度约为500px,所以当我到达iframe时我不能再滚动(除非我非常靠近两侧).

谢谢

Answer 1

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

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

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

    html, body {
        overflow: hidden
    }

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

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

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

   *{
        -webkit-overflow-scrolling: touch
    }

4. 将旧版“滚动”属性添加到 iframe 以阻止 iframe 尝试滚动：

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