ScrollTop does not work with -webkit-overflow-scrolling: touch

I have a one-page application created in Phonegap and I had problems with my iOS device (and not Android) using:

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

If I go to another page, and the view I just came from had it scrollTop //38, it would keep the same scrollTop //38, since I only changed the contents inside page.

So I would use the above jSto edit the top of the scroll, so do the following:

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

Fantastic, however, when I touch the screen, it will jump down 38pxand reset scrollTop = 38.

If i remove

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

Then this problem will no longer occur, but the smooth scrolling will stop and will scroll only as long as you touch the screen.

- , scrollTop, ?

+4
1

, , page JS CSS.

page page, :

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

HTML5.

.page #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);
+1

Source: https://habr.com/ru/post/1548174/


All Articles