Question

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

我正在使用phonegap将其移植到Android上的“原生”应用程序中，我在滚动方面遇到了一些麻烦。

它可以在设备上的Chrome以及Android浏览器上完美运行。我已经在几个设备上进行了测试，它们在浏览器中都运行良好。一旦我将项目放入Phonegap，滚动就变得非常“波涛汹涌”并且跳过并粘住。我添加了一个视频链接，向您展示行为：

我会简要解释一下它的工作原理：

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

以下是该应用的链接：

http://ferriesapp.ca/app/

我尝试过的事情

我们正在使用“overscroll：scroll;”一个这些内容div，我知道它与Android pre 2.3有些不兼容，但现在应该很好。

我们尝试了一些大型库，比如iScroll和Scrollable，以及类似的东西都无济于事。

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

我们使用Zepto的触控模块编码了正确的触控事件。

我已经在从Nexus one（4.0.4）到Nexus 7（4.3）的设备上进行了测试，所有这些设备的故事都是一样的。

非常感谢任何帮助

我一直在努力解决这个问题，而且我似乎无法在互联网上找到任何可以触及这个“不稳定”滚动错误的内容。

编辑：这是从安装到滚动错误发生时的logcat： http://pastebin.com/Aa7mDeAX

Answer 1

你那里有一张非常讨厌的样式表。首先，你不需要任何盒子阴影，因为手机不喜欢它。然后，由于你有很多空格，你想通过用户选择：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？这似乎是造成主要滚动问题的原因。

Answer 2

作为Google Play游戏开发者，在“我们想要切换视图时切换到一个页面上”拥有“三个”内容视图“并不是一个好主意。我唯一的输入是，如果你想走这条道路就是检查http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich

Android Phonegap Scroll非常糟糕

2 个答案: