scrollTop不能与-webkit-overflow-scrolling一起使用：touch

Question

我有一个内置在Phonegap中的单页面应用程序，我在使用时遇到了iOS设备（不是android）的问题：

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