iPad滚动到iframe顶部答案

【问题标题】：iPad Scrolling to Top of iframeiPad滚动到iframe顶部
【发布时间】：2014-02-16 00:01:39
【问题描述】：

我已尽力在可访问的地方重新创建它。我有一个运行 ios7 的 ipad mini 并且正在使用类似的东西：

<div id="holder">
    <iframe height="100%" width="100%" src="http://www.cnn.com" id="iframe"></iframe>
</div>

#holder {
    height:500px;
    width:100%;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

见小提琴： http://jsfiddle.net/khJgY/4/

现在的问题是，在 iframe 中滚动可以正常工作。但是如果你改变焦点（比如其他 HTML/CSS/JS 编辑框之一），iframe 会滚动回左上角，我不知道为什么。

任何帮助将不胜感激。

【问题讨论】：

标签： html ipad iframe scroll mobile-safari

【解决方案1】：

以下 css 为我修复了它：

html, body
{
    height: 100%;
    padding-bottom: 1px;
}

【讨论】：

【解决方案2】：

我自己也遇到了这个问题。我发现这是一个错误，其中某些 CSS 使浏览器跳转到页面顶部，但仅在某些情况下，例如在表单和 iframe 中。对我来说，我发现当按钮处于活动状态时应用 box-shadow 会发生这种情况。为了解决这个问题，我只是通过设置 box-shadow: none; 使效果不会在较小的屏幕上触发。

【讨论】：

对我来说，删除任何影响容器高度的东西，以及 box-shadow 解决了这个问题。

【解决方案3】：

以下 CSS 为我修复了它。 (source)

在内部 iframe 上：

html, body
{
    width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
}

【讨论】：