ios 7 mobile 中 iframe 中的内容始终滚动到顶部答案

【问题标题】：content within an iframe in ios 7 mobile keeps scrolling to top alwaysios 7 mobile 中 iframe 中的内容始终滚动到顶部
【发布时间】：2014-06-25 08:46:42
【问题描述】：

我有一个 iframe 显示包含在一个 div 中的内容，该 div 具有下面指定的 css 滚动集

CSS 在哪里。页 { 高度：100%；溢出：自动； -webkit-溢出滚动：触摸；位置：相对； } iframe#FrameId{ 高度：100%；宽度：100%； }

问题是没有处理 javascript 上的滚动并依赖浏览器来处理滚动。

如果我稍微滚动一下内容，一旦滚动完成，页面就会跳回到页面的开头或顶部。此外，如果我单击 iframe 中的任何 div 或任何其他元素，它会滚动到顶部，基本上它不会记住滚动距离并始终滚动到顶部。

我尝试在浏览器上禁用 javascript，但我仍然看到相同的行为。我怎样才能防止它滚动到顶部？这只发生在 ios 7 手机上。这是 ios 7 上的已知问题吗？

任何调试或解决此问题的指针？

【问题讨论】：

标签： javascript css iframe ios7

【解决方案1】：

这个技巧帮助了我

https://discussions.apple.com/thread/3838289

控制溢出的 div 比 iframe 容易得多，并且滚动 + 空白内容问题一直可以追溯到 iOS 4，以前我什至无法让 2 指滚动工作（在iframe)。

它是这样的：

<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>


a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我也遇到了同样的问题。在我们的软件中，我们使用带有 iframe 的单个页面来加载内容，并在主页左侧使用侧导航栏。

每次我们滚动经过第一个“折叠”时，它都会“闪烁”然后跳到顶部...... 我意识到问题出在页面某处（在 iframe 内或主容器页面上）发生了 CSS 更改。

通过禁用我们所做的 Jquery CSS 更改并删除 CSS 动画，我现在防止了问题的发生。

【讨论】：

如果您能添加为什么会出现此问题以及您的解决方案在这种情况下将如何提供帮助会更好。
当在浏览器框架内进行 CSS 更改时，iOS 会重新加载页面，因为我们认为它认为这是新内容（我们仍然不知道为什么，我们仍在研究它:( . .. ). 通过移除 CSS 动画并将 javascript CSS 更改为元素，iOS 不会认为页面已重新加载，因此它不会自动滚动到顶部。

【解决方案3】：

这是很久以前问过的，但我最近（10 分钟前）也遇到了这个问题。原因是

overflow: auto; -webkit-overflow-scrolling: touch;

块。当我将所有这些都更改为

overflow-y: scroll;

完全没有-webkit-overflow-scrolling，它工作得很好。

【讨论】：