scrollTop在使用-webkit-overflow-scrolling: touch时无效。

Question

scrollTop在使用-webkit-overflow-scrolling: touch时无效。

4

我有一个用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吗？

- Jamie Hutber

https://dev59.com/bnE85IYBdhLWcg3wQxPG#17195346 - Vitorino fernandes

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kenny Tang · Accepted Answer

我认为这是因为在JS和CSS中都使用了查询选择器page。

选择器page表示具有标签名称page的标签，类似于以下内容：

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

这不是一个有效的标准HTML5元素。

您是指类名为.page或ID为#page的元素吗？

我已经尝试过了，一切都正常。

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