页面自动滚动到底部

Posted 2023-03-11

【中文标题】页面自动滚动到底部

【英文标题】：Page auto scroll into bottom

【发布时间】：2019-01-22 06:20:54

【问题描述】：

我创建了一个包含多个文本段落的 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 移动浏览器的代码

【问题讨论】：

考虑将 iframe 中的内容加载到 DIV 中。您的方法可能会导致双重滚动。此外，iframe 对移动设备不友好；避免使用它。

How to auto-scroll to end of div when data is added?的可能重复

【参考方案1】：

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

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

【讨论】：

我用过，但它只允许在 Safari mobile 上滚动，问题是，打开页面后，iframe src 内容应该自动向下滚动到底部。

@UdayaArunakantha 试试这个JS 代码，var myIframe = document.getElementById('iframe'); myIframe.onload = function () myIframe.contentWindow.scrollTo(xcoord,ycoord);

我试过了，但不能在 safari 中工作，这里是链接：onlanka.com/mychat/temp

我无法访问苹果设备，因此无法测试演示。尝试使用px 值而不是%。或尝试稍微滚动 iframe，例如：100px

【参考方案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

【讨论】：

我用过，但它只允许在 Safari mobile 上滚动，问题是，打开页面后，iframe src 内容应该自动向下滚动到底部。

您是否将触发滚动的脚本放在 iframe 一侧？

尝试在窗口加载后执行脚本。 window.addEventListener('load', yourscript )