在 iOS 的 Safari 中禁用 iframe 的滚动答案

【问题标题】：Disable scroll of an iframe in Safari in iOS在 iOS 的 Safari 中禁用 iframe 的滚动
【发布时间】：2019-11-23 14:59:55
【问题描述】：

如果我在网页中有 iframe，即使它没有溢出的内容（因此它不会在任何平台上显示任何滚动条）并且没有任何滚动条只是为了让 Safari 更清楚我添加

scrolling='off' 到 iframe
overflow: hidden 到它的 CSS
overflow: hidden 指向在 iframe 中加载的页面的 html 和正文
-webkit-overflow-scrolling: auto; 也可以在 iframe 中加载的页面的 html 和正文（禁用动量滚动）
touchstart、touchmove 和 touchend 的事件侦听器将 iframe 的这些事件绑定到 e => e.preventDefault()

尽管如此，当我触摸 iframe 顶部的屏幕部分并移动手指时，它不会滚动父页面（因为我应该禁用 iframe 中的各种滚动），它会尝试滚动带有动量滚动的 iframe。

例如，如果我在 iframe 上方有 <div>Some Text</div> 并且我的父页面足够长以具有滚动条，如果我通过触摸 iframe 之外的内容来滚动页面，我的主页会按预期滚动。

现在假设我向下滚动页面以使 Some Text 不可见，然后我触摸 iframe 并向下移动手指以再次查看 Some Text（因为它应该不可滚动并忽略所有滚动/触摸事件并将其传递给其父级，就像 chrome 的方式一样）而不是看到 Some Text 我在页面顶部看到一个空白屏幕（当上面没有内容时，动量滚动效果，因为它正在尝试滚动内部 iframe 和内部 iframe 的滚动区域上方没有内容）。

如果我通过触摸 iframe 之外的某个位置来做同样的事情，我会按预期看到 Some Text。我希望这个 iframe 表现得像一个普通的不可滚动的 div。

我希望它不能滚动，但我不知道如何将此要求传达给 Safari。 Chrome 不需要上面提到的任何东西，只是因为 iframe 没有任何内容溢出，Chrome 中的一切都按预期工作而没有做任何事情，但出于某种原因，Safari 坚持认为这个 iframe 需要可滚动。

有什么方法可以完全禁用 iframe 的滚动？
有什么方法可以完全禁用 iframe 的垂直滚动，同时保留水平滚动？

【问题讨论】：

标签： css iframe scroll mobile-safari

【解决方案1】：

我遇到了类似的问题。我会删除所有这些，然后重新开始。

我的解决方案：底层页面是 index2.html，然后在它上面我有 index.aspx，它有这个样式属性：

.resp-container { 
    position: relative;
    overflow: hidden;
    padding-top: 70.25%;
    height: 900px;
}

index2.html里面没有这个类，但是index.aspx使用了这个类：

    <iframe id="myIframe" class="resp-iframe" src="/index2.html"></iframe>

注意：底层的 html 高度必须大于它所在的容器，因为...idk 为什么，但如果它更小或相同大小，则不起作用。

您还可以通过以下几种方式通过 javascript 关闭滚动：

document.getElementById("myIframe").setAttribute("scrolling", "no");
document.getElementById("myIframe").style.overflow="hidden";

【讨论】：