页面自动滚动到底部
页面自动滚动到底部
我创建了一个包含多个文本段落的HTML页面。我希望在打开页面后，它能够自动滚动到底部。所以我使用了下面的Javascript代码，它在大多数主流浏览器（Chrome、Firefox、IE、Opera）中都能正常工作。假设这个页面的文件名是`page.html`。
但后来我需要在一个iframe中显示它。假设主页面是`index.html`，`index.html`中有一个iframe标签：``。
在主流浏览器的iframe中加载时，它也能正常工作，但在苹果的Safari移动浏览器中却无法正常工作。
我在Safari移动浏览器中测试了直接的HTML页面`page.html`，它可以工作！但是在`index.html`中加载了相同的页面后，它就无法工作了。
这是我在`page.html`中使用的Javascript代码：
请为苹果的Safari移动浏览器提供一个修复代码。
问题的出现原因是在iOS Safari浏览器中，如果iframe的父元素没有设置-webkit-overflow-scrolling: touch属性和iframe的高度，那么页面自动滚动到底部的功能无法实现。另外，如果在iframe中有一些使用了position: fixed属性的元素，在iOS Safari中也无法固定在页面上。可以尝试使用https://github.com/PierBover/ios-iframe-fix提供的解决方案来解决这个问题。
解决方法是在iframe的父元素上添加-webkit-overflow-scrolling: touch属性，并为iframe设置一个高度。代码如下：
<style>
.parent-iframe {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
iframe {
height: 100vh
}
</style>
<div class="parent-iframe">
<iframe src="http://someurl.com ...>
</div>
另外，如果你的iframe中有一些使用了position: fixed属性的元素，在iOS Safari中无法固定在页面上。你可以尝试使用提供的解决方案来避免这个问题。如果你已经使用了该解决方案，但页面在打开后无法自动滚动到底部，可能是因为你没有在iframe中添加触发滚动的脚本。你可以尝试在窗口加载后执行该脚本window.addEventListener('load', { yourscript })。
问题出现的原因是在Safari移动设备上，使用-webkit-overflow-scrolling: touch属性只能允许滚动，但无法自动将iframe的内容滚动到底部。解决方法是使用以下JS代码：var myIframe = document.getElementById('iframe'); myIframe.onload = function () {myIframe.contentWindow.scrollTo(xcoord,ycoord);}。然而，该方法在Safari浏览器中无效。根据提供的链接onlanka.com/mychat/temp，作者无法测试该方法是否有效。建议尝试使用px单位代替%单位，或者尝试将iframe滚动一小段距离，例如100px。