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

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

1 个答案: