Android手机间隙滚动是非常斩波

Android Phonegap Scroll is Very Choppy

本文关键字:非常 滚动 手机 间隙 Android      更新时间:2023-09-26

我正在构建一个非常基本的Web应用程序,用于显示轮渡时间表。

我正在使用phonegap将其移植到安卓系统上的"原生"应用程序,我在滚动方面遇到了一些麻烦。

它在设备上的Chrome浏览器和安卓浏览器上都能完美工作。我在几台设备上进行了测试,它们在浏览器中都能很好地工作。然而,当我把这个项目放进Phonegap时,滚动变得非常"起伏不定",忽跳忽跳。我添加了一个视频链接来向您展示行为:

http://youtu.be/D18s9kgnD7g

我会给你一个简单的解释它是如何工作的:

当我们切换视图中的内容时,我们使用translate3d CSS方法进行转换,以避免使用页面转换。因此,我们没有滚动实际页面,而是滚动单个内容div,这样在内容视图之间切换时就可以避免奇怪的滚动错误。基本上,我们在一个页面上有三个"内容视图",当我们想切换视图时,它们就会切换。

这里有一个应用程序的链接:

http://ferriesapp.ca/app/

我尝试过的东西

我们使用的是"overscroll:scroll;"其中一个内容div,我知道它与安卓2.3之前的版本有些不兼容,但现在应该很好。

我们尝试过一些大的库,比如iScroll和Scrollable,但都无济于事。

我已尝试阻止touchmove的默认操作。

我们已经使用Zepto的触摸模块对正确的触摸事件进行了编码。

我在Nexus one(4.0.4)到Nexus 7(4.3)的设备上进行了测试,所有这些设备都是一样的。

如有任何帮助,我们将不胜感激

我已经为此挣扎了一段时间,在互联网上似乎找不到任何能触及这个"波涛汹涌"滚动错误的东西。

编辑:以下是从安装到滚动错误发生的日志:http://pastebin.com/Aa7mDeAX

那里有一个非常讨厌的样式表。首先,你不想要任何盒子阴影,因为手机不喜欢这样。然后,由于您有很多空格,您希望通过user-select:html帮助触摸更好地处理这些空格。

* {
    margin: 0;
    padding: 0;
    -webkit-user-select:html;
    -khtml-user-select:html;
    -moz-user-select:html;
    -ms-user-select:html;
    user-select:html;
}

这应该有助于你的滚动,但你仍然有很多东西需要清理CSS。另一个问题是,你甚至没有正确加载cordova,但这可能对滚动来说并不重要。

实际上,什么是zepto_002.js?这似乎是导致主要滚动问题的原因。

作为google play的开发人员,在一个页面上有"三个"内容视图"当我们想切换视图时就会切换"不是一个好主意。不过,如果你想走这条路,我唯一的输入就是检查一下http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich