[英]scrollTop doesn't work with -webkit-overflow-scrolling: touch
I have a single page application built in Phonegap and I had been having problems with iOS device (not android) whilst using: 我有一个内置在Phonegap中的单页面应用程序,我在使用时遇到了iOS设备(不是android)的问题:
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
. 如果我导航到另一个页面并且我刚刚来自的视图有
scrollTop //38
它将保持相同的scrollTop //38
因为我只更改了page
内的内容。
So I would use the above jS
to edit the scroll top, so doing this: 所以我会使用上面的
jS
编辑滚动顶部,所以这样做:
document.querySelector('page').scrollTop //outputs 38
Fantastic, however when i touch the screen it would jump down 38px
and resetting scrollTop = 38
. 太棒了,但是当我触摸屏幕时,它会跳下
38px
并重置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? 现在有人如何正确使用
scrollTop
同时保持这种滑动效果本身有效吗?
I think it is because the query selector page
in both JS and CSS. 我认为这是因为JS和CSS中的查询选择器
page
。
The selector page
means the tag(s) with tag name page
which is something like this: 选择器
page
表示带有标签名称page
标签,如下所示:
<page foo="bar"></page>
which is not a valid standard HTML5 element. 这不是有效的标准HTML5元素。
Do you means .page
or #page
which is class name and id respectively. 你指
.page
或#page
这分别是类名和ID。
I have tried it and every things work fine. 我试过了,每件事情都很好。
HTML 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 CSS
.page {
display: block;
width: 10em;
height: 5em;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
JS 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.