Android手机间隙滚动是非常斩波
Android Phonegap Scroll is Very Choppy
我正在构建一个非常基本的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
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- Image赢得't隐藏在滚动jQuery上
- Safari(Mac OS)上的jQuery平滑滚动问题
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- JavaScript上下滚动不可预测
- 滚动和表格
- Android手机间隙滚动是非常斩波
- 改善加载时间非常长的滚动页面的图像
- 在较小的设备上滚动非常跳跃
- 动画滚动是非常错误的
- 当 float:left 在 EE2 中使用一些繁重的 JavaScript 时,滚动速度非常慢(浏览器原生)