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 38pxand 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?

http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad/17195346#17195346 — Vitorino fernandes, Dec 13 '14 at 08:10

score 1 · Answer 1 · answered Jul 12 '14 at 12:10

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

Nope, its just `page`, that aside. I think you have misread my problem, all the same thanks for trying. However its when I jump between page loads, now that it doesn't give me back the correct scrollTop value, its that when i set it to 0, then touch the screen it will reset to its original state, in this case `38` — Jamie Hutber, Jul 12 '14 at 15:38
@GajasKuizinas - So you're saying you have an element that looks like this in your HTML? ` /*content here*/ ` — Josh Burgess, Dec 10 '14 at 16:56

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

1 Answers1