javascript - 滚动 "touchmove"时断断续续

Question

我想在移动设备上使用“position:fixed”(我有一个 Android 设备)——但这个不存在。
我通过创建两个 div 来伪造它，这两个 div 的高度总和为屏幕的高度(使用 JS)，并将 touch 监听器添加到底部 div。这些事件将调整 scrollTop 值。这是旧“touchScroll.js”的副本。

滚动成功，我什至添加了吊索感。然而，与操作系统滚动窗口 View 时相比，整个滚动非常不稳定。

我在随机的地方阅读过，在这里的某个地方添加了 -webkit-backface-visibility:hidden; 和 -webkit-transform:translate3d(0,0,0); css bits 来解决这个问题。我在 div 本身， body 上，只有背面部分，只有转换等......所有排列......都没有帮助。印章仍然存在，并且这些技巧阻止了我的键盘出现在 inputs

中

我试图在我的滚动 div 中创建一个内部 div，而不是调整 scrollTop 值我只是移动内部 div 使其成为 position:absolute 和调整它的 top。这没有区别。

有什么办法可以解决这个问题吗？
示例在这里:http://mobile.phantasyrpg.com/so-example

Answer 1

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

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

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

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