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