页面自动滚动到底部

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>

请建议我修复 Apple 的 Safari 移动浏览器的代码

Answer 1

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

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

Answer 2

您必须在 iframe 的父级上使用 -webkit-overflow-srolling: touch，并为您的 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>

此外，如果您的 iframe 中有一些 position: fixed 元素，它们将不会在 ios safari 上得到修复。您可以尝试以下解决方案来避免这种情况：
https://github.com/PierBover/ios-iframe-fix