IOS7移动设备中iframe中的内容始终滚动到顶部

Question

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

其中CSS为.Page {高度: 100%；溢出:自动；-webkit-溢出-滚动:触摸；位置:相对；} iframe#FrameId{高度: 100%；宽度: 100%；}

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

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

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

有什么建议可以调试或解决这个问题吗？

Answer 1

这个问题很久很久以前就被问到了，但我最近(10分钟前)也遇到了这个问题。原因是

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

区块。当我把这一切都改成

overflow-y: scroll;

完全不需要-webkit-overflow-滚动，它就能完美地工作。

Answer 2

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

每次我们滚动经过第一个“折叠”时，它都会“闪现”，然后跳到顶部……我意识到这个问题是因为页面上的某个地方(无论是在iframe内还是在主容器页面上)进行了CSS更改。

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

Answer 3

这个技巧对我很有帮助

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

与iframe相比，控制溢出的div要容易得多，而且滚动+空白内容的问题一直都可以回到iOS 4，之前我甚至不能让两个手指滚动(在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>