javascript - Android Phonegap 滚动条非常不稳定

Question

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

我正在使用 phonegap 将其移植到 Android 上的“ native ”应用程序，但我在滚动时遇到了一些麻烦。

它在设备上的 Chrome 以及 Android 浏览器上都能完美运行。我已经在多种设备上进行了测试，它们在浏览器中都运行良好。一旦我将元素放入 Phonegap 中，滚动就会变得非常“断断续续”并且跳跃和粘住。我添加了一个视频链接来向您展示行为:

http://youtu.be/D18s9kgnD7g

我将简要解释一下它是如何工作的:

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

这是应用程序的链接:

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

那里有一个非常讨厌的样式表。首先，您不需要任何盒子阴影，因为手机不喜欢那样。然后，由于您有很多空白区域，您希望通过 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 是什么？这似乎是导致主要滚动问题的原因。