scrollTop doesn't work with -webkit-overflow-scrolling: touch

Question

I have a single page application built in Phonegap and I had been having problems with iOS device (not android) whilst using:

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

If i navigate to a different page and the view I just came from had scrollTop //38 it would keep the same scrollTop //38 as I only changed content inside of page .

So I would use the above jS to edit the scroll top, so doing this:

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

Fantastic, however when i touch the screen it would jump down 38px and resetting scrollTop = 38 .

If i remove

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

Then this problem would no longer occur, but also smooth scrolling would stop and would only scroll so long as your were touching the screen.

Does anybody now how I can use scrollTop correctly whilst keeping this sliding effect natively active?

Answer 1

I think it is because the query selector page in both JS and CSS.

The selector page means the tag(s) with tag name page which is something like this:

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

which is not a valid standard HTML5 element.

Do you means .page or #page which is class name and id respectively.

I have tried it and every things work fine.

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;

The page didn't jump unexpectedly when I touch on the screen or on it.

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