滚动"touchmove“是不稳定的

Question

我想在移动设备上使用"position:fixed“(我有一台安卓设备)--但这并不存在。

我通过创建两个div来伪造它，这两个div的高度之和为屏幕的高度(使用JS)，并在底部div中添加了touch侦听器。这些事件将调整scrollTop值。这是一个旧的"touchScroll.js“的复制品。

滚动效果很好，我甚至添加了吊衣的感觉。然而，与操作系统滚动窗口视图时相比，整个滚动非常不稳定。

我在随机的地方阅读过，在这里的某个地方添加了-webkit-backface-visibility:hidden;和-webkit-transform:translate3d(0,0,0); css位来解决这个问题。我尝试了在div本身，在身体上，只有背面部分，只有变换等。所有的排列。什么都没有用。图章仍然存在，这些技巧阻止了我的键盘出现在input的“s”中。

我试图在滚动的内部div中创建一个内部div，而不是调整内部div的值，我只是通过将其设为position:absolute并调整其top来移动内部div。这并没有什么不同。

有没有什么解决方案可以避免这种情况呢？

示例如下：http://mobile.phantasyrpg.com/so-example

Answer 1

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

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

我建议您尝试最新版本的TouchScroll或iScroll，因为它们都使用CSS转换，也可能包含其他优化。

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

Answer 2

-webkit-overflow-scrolling: touch; 

会让事情变得更顺畅。不确定它是否适用于老式安卓系统