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;
}

在移动应用上滚动iframe会在某个时刻跳转到页面顶部

2 个答案: