iPad滚动到iframe顶部

Question

我尽力将这个内容重新制作成易于理解的形式。 我有一个运行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;
}

请参见fiddle：http://jsfiddle.net/khJgY/4/ 现在的问题是，iframe中的滚动正常工作。但是如果您更改了焦点（例如转到其他HTML / CSS / JS编辑框之一），则iframe会滚动回到左上角，我不知道为什么。

如有帮助，将不胜感激。

- lilwupster

Answer 1

以下CSS代码对我有所帮助。（来源：链接）

在内部的iframe中：

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

- mattrowsboats

Answer 2

我刚刚遇到了这个问题。我发现有一个bug，特定的CSS会使浏览器跳转到页面顶部，但只在某些情况下出现，比如在表单和iframe中。对我来说，我发现当按钮处于活动状态时应用box-shadow会导致这种情况发生。为了解决这个问题，我只是通过设置box-shadow: none;来防止其在较小屏幕上触发。

- kent_e

---

对我来说，移除任何影响容器高度的内容以及盒子阴影解决了这个问题。 - Tom

Answer 3

以下 CSS 对我有帮助，它将问题解决了：

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

- lloiser