“-webkit-overflow-scrolling: touch”在移动设备上导致垂直滚动问题

Question

我正在制作一个响应式移动网站。 在我的手机上进行测试时，我注意到我无法垂直滚动超过可以水平滚动的内容。

这是我的意思的一个示例（抱歉，您在手机上看不到水平滚动条，但请相信我，它可以工作）。

移动 Webkit 浏览器无法在此示例中滚动过表格： http://jsfiddle.net/tArEy/

然后我注释掉以下行以使垂直滚动工作。但是，这使得水平滚动有点不稳定。

-webkit-overflow-scrolling: touch;

移动 Webkit 浏览器可以在此示例中滚动过去的表格，但它有点小故障。 http://jsfiddle.net/tArEy/1/

有人知道如何仅使用 CSS 来解决此问题吗？

演示必须在浏览器上进行测试。 （我在 Android 上运行 Chrome 浏览器。我认为 iPhone 也有同样的问题）。

编辑：

事实证明，在您的 CSS 中没有以下行的移动 webkit 浏览器中，水平滚动非常容易出错：

-webkit-overflow-scrolling: touch;

但是，这条线无法垂直滚动，所以我有点停滞不前。其他非 webkit 浏览器水平滚动就好了。

编辑 2：

我拿到了一部 iPhone。溢出滚动是硬件加速的并且可以完美运行。这似乎只是 Chrome for Android 问题。

Answer 1

这是仅适用于 Android 的 chrome 中的错误。它已在最近的升级中得到修复。

Answer 2

这可能有助于解决问题：http://filamentgroup.github.com/Overthrow/ 溢出滚动仅在较新的手机中受支持。当我测试时，我发现新手机是否有轻微的滚动问题，支持 android 2.x 和 ios4 会让你哭泣。

如果您是水平滚动，您可能需要重新考虑您的设计。