scrollTop不支持-webkit-overflow-scrolling: touch

Question

我有一个用Phonegap构建的单页面应用程序，我在使用iOS设备(不是安卓)时遇到了问题：

 document.querySelector('page').scrollTop = 0;

如果我导航到一个不同的页面，并且我刚刚来自的视图有scrollTop //38，它将保持相同的scrollTop //38，因为我只改变了page中的内容。

因此，我将使用上面的jS来编辑顶部滚动，这样做：

 document.querySelector('page').scrollTop //outputs 38

太棒了，但是当我触摸屏幕时，它会跳到38px并重置scrollTop = 38。

如果我删除

 page {
      -webkit-overflow-scrolling: touch;
 }

那么这个问题就不会再发生了，但是平滑的滚动也会停止，只有当你触摸屏幕的时候才会滚动。

现在有没有人知道如何在保持滑动效果的同时正确使用scrollTop？

Answer 1

我认为这是因为JS和CSS中的查询选择器page。

选择器page指的是标记名为page的标记，如下所示：

<page foo="bar"></page>

它不是有效的标准HTML5元素。

你指的是.page还是#page，分别是类名和id。

我已经试过了，一切都很好。

HTML

<div class="page">
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
    foo<br>bar<br>
</div>

CSS

.page {
    display: block;
    width: 10em;
    height: 5em;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

JS

document.querySelector('.page').scrollTop = 0;

当我在屏幕上或在屏幕上触摸时，页面并没有意外跳转。

console.log(document.querySelector('.page').scrollTop);