在移动应用程序上滚动 iframe 在某些时候跳转到页面顶部

Question

我有这个 html：

<header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a>
     <h1 class="title">Page</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;">
    <iframe style="height: 100%; width: 100%;" src="url"></iframe>
</div>

iframe 正在向下/顶部和向右/向左滚动，但是当我在某个点滚动时它会跳到页面顶部。

Answer 1

引用对象而不是 iframe

<object type="text/html" data="content-to-scroll.html"></object>

您使用的是什么移动设备？

<header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a>
 <h1 class="title">Page</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%;   padding-top: 42px;">
<object type="text/html" style="height: 100%; width: 100%;" data="url"></object>
</div>

这是已知的。但并非总是如此。

Answer 2

iframe 必须具有特定的高度，并且它是容器的一些样式。

{
    -webkit-overflow-scrolling: touch!important;
    overflow-y: scroll!important;
    height: 100%;
    position: absolute;
}