页面自动滚动到底部

Question

我创建了一个HTML页面，其中包含多个文本段落。 我希望它在打开页面后自动滚动到底部。 因此，我使用了以下Javascript，并且运行良好。 假设它是page.html

但是后来我需要它显示在iframe中。 假设首页为index.html ， index.html具有iframe标签： <iframe src="./page.html"></iframe>

当在主要浏览器（chrome，firefox，IE，Opera）的iframe中加载但不在Apple的Safari移动浏览器中加载时，它也可以工作。

我使用Safari移动浏览器测试了直接的HTML页面page.html ，它起作用了！

但是在将相同的页面加载到index.html的iframe中后，它不起作用。

这是我在page.html使用的Javascript

<script language="javascript">
function autoScrolling() { window.scrollTo(0,document.body.scrollHeight); }
setInterval(autoScrolling, 1000); 
</script>

请向我建议苹果Safari移动浏览器的代码修复

Answer 1

您需要使用-webkit-overflow-scrolling: touch ，例如：

<div style="overflow: scroll !important; -webkit-overflow-scrolling: touch !important;">
     <iframe ...> ... </iframe>
</div>

Answer 2

您必须使用-webkit-overflow-srolling: touch iframe的父项，然后为iframe设置高度。

<style>
.parent-iframe {
   -webkit-overflow-srolling: touch;
   overflow-y: auto;
}
iframe {
  height: 100vh
}
</style>
<div class="parent-iframe">
 <iframe src="http://someurl.com ...>
</div>

另外，如果您有某些position: fixed iframe中的position: fixed元素也不会在ios Safari中固定。 您可以尝试使用以下解决方案来避免这种情况：
https://github.com/PierBover/ios-iframe-fix