Android Phonegap Scroll 非常不稳定答案

【问题标题】：Android Phonegap Scroll is Very ChoppyAndroid Phonegap Scroll 非常不稳定
【发布时间】：2013-08-14 19:34:35
【问题描述】：

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

我正在使用 phonegap 将其移植到 Android 上的“本机”应用程序中，但滚动有点麻烦。

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

http://youtu.be/D18s9kgnD7g

我会简要解释一下它是如何工作的：

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

这是应用程序的链接：

http://ferriesapp.ca/app/

我尝试过的事情

我们正在使用“overscroll:scroll;”这些内容 div 之一，我知道它与 Android 2.3 之前的版本有些不兼容，但现在应该可以了。

我们尝试了一些大型库，例如 iScroll 和 Scrollable，但都无济于事。

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

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

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

任何帮助将不胜感激

我已经为此苦苦挣扎了一段时间，我似乎无法在互联网上找到任何与此“断断续续”的滚动错误有关的内容。

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

【问题讨论】：

Android Webview 不支持 Chrome 浏览器的完整功能集。检查/发布您的 logcat 以查看是否出现任何有用的消息。
@MorrisonChang 这是从安装到滚动错误发生时未过滤的 LogCat...我还是 Android 开发新手，所以我真的不知道这意味着什么：pastebin.com/Aa7mDeAX
我在您的日志中没有看到任何内容，也许其他人看到了。您可能想尝试在您的应用程序中关闭硬件加速，以了解它对应用程序的影响。在 Android WebView 上查看 Google IO 会话：developers.google.com/events/io/2012/sessions/gooio2012/122

标签： javascript android css cordova scroll

【解决方案1】：

那里有一个非常讨厌的样式表。首先，您不想要任何盒子阴影，因为移动设备不喜欢那样。然后，由于您有很多空白，您希望通过 user-select: html 帮助 touch 更好地处理这些空白。

* {
    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 是什么？这似乎是导致主要滚动问题的原因。

【讨论】：

嘿，我看不到你在哪里看到 zepto_002.js 我们没有在代码中的任何地方链接它，它不在我们的资源中？你在哪里看到的？
对不起，我下载了代码，所以我可以在实际设备上试用它，因为这是使用它的唯一方法。 zepto_002.js 可能是你的 zepto.min.js。当我删除它时，滚动工作正常。而且由于它可能不是 zepto，因此可能是您的脚本使用了 zepto。
嘿，是 Zepto 触摸模块引起了问题！我已经删除了，现在我很好！谢谢！
我对用于 user-select 属性的值感到好奇。为什么html？我找了，不存在（caniuse.com/#search=user-select%3A%20html）

【解决方案2】：

作为一名 google play 开发人员，在一个页面上有“三个“内容视图”，当我们想要切换视图时会切换出来”不是一个好主意。我唯一的意见是，如果你想走这条路，那就去看看http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich

【讨论】：

嘿 Sam，感谢您的输入，我在发布此内容之前就知道强制 gpu 渲染，甚至强制这似乎没有任何作用。至于 3 个内容视图，它不是 ajax 加载它们或任何东西，它只是“移动它们”我们这样做是为了避免使用页面加载。