Question

我创建了一个HTML页面，其中包含多个文本段落。我希望它在打开页面后自动滚动底部。因此我使用了以下Javascript，并且效果很好。假设它是NLog.LogManager.Shutdown();

但是我需要它显示在iframe中。假设首页为page.html，index.html具有iframe标签：index.html

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

我使用Safari移动浏览器测试了直接HTML页面<iframe src="./page.html"></iframe>，并且有效！

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

这是我在index.html中使用的Javascript

page.html

请向我建议针对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

页面自动滚动到底部

2 个答案: