滚动浏览“touchmove”是不稳定的

时间:2012-07-06 22:22:38

标签: javascript css mobile-website

我希望移动设备上的“位置:固定”(我有一个Android) - 这不存在 我通过创建两个div来伪造它,其高度总和到屏幕的高度(使用JS)并且将touch个侦听器添加到底部div。事件将调整scrollTop值。这是旧的“touchScroll.js”的副本。

滚动成功,我甚至添加了吊带感觉。但是,与操作系统滚动窗口视图时相比,整个滚动非常不稳定。

我已经阅读了随机位置,并在这里添加-webkit-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0); css位来解决此问题。我尝试了div本身,身体上,只有背面部分,只有变换等...所有排列......没有任何帮助。印章仍然存在,并且技巧阻止我的键盘出现在input s

我尝试在滚动内部创建一个内部div,而不是调整scrollTop值,我只需移动内部div position:absolute并调整它top。这没什么区别。

是否有任何解决方案可以击败斩? 示例如下:http://mobile.phantasyrpg.com/so-example

2 个答案:

答案 0 :(得分:1)

不幸的是,可能没有解决方案,Android浏览器因其糟糕的渲染性能而闻名。不同的Android版本/设备/浏览器组合将显示不同的性能和兼容性,事实上,您的示例在我的Android 4.0.4 Chrome上运行非常流畅,但在工厂浏览器上甚至无法正常运行。

作为一般规则,总是尝试使用CSS转换,并且仅在其他属性(如scrollTop)之后,因为转换通常是硬件加速的。 (正如iOS Mobile Safari和现代Android浏览器中的情况一样)。

我建议您尝试使用最新版本的TouchScrolliScroll,因为它们都使用CSS转换,并且可能还包含其他优化。

-webkit-transform:translate3d(0,0,0);设置通常用于强制执行硬件加速,应该用于正在更改/移动的元素(在您的情况下为内容div)。但是,如果您使用新版本的滚动库,它们将覆盖-webkit-transform属性。仅当-webkit-backface-visibility也应用于元素时,-webkit-transform才适用,将其设置为hidden可能会解决不必要的闪烁,或者在某些情况下可能会提高性能。

答案 1 :(得分:0)

-webkit-overflow-scrolling: touch; 

应该让事情更顺畅。不确定它是否适用于较旧的Androids