HTML表，表体的垂直滚动可防止包装div的水平滚动

Question

我正在尝试使用可滚动的主体构建一个简单的固定宽度html表。在手机上，我希望它保持宽度并通过滚动来溢出。

这是bin http://output.jsbin.com/hefuzeleza （在手机或平板电脑上打开它，在浏览器模拟中它可以正常工作）。

无论如何，我的代码看起来像这样：

div.wrapper // width: 1060px; overflow-x: auto
  table
    thead
    tbody // height: 300px; overflow-y: auto;

我的意图非常明确，表格应该可以在两个轴上滚动。它就像在桌面上一样工作。但是在移动设备上，它不允许通过拖动桌面主体（设置overflow-x）来进行横向滚动。

我假设问题是我无法水平移动身体，因为垂直滚动存在且“触摸”移动事件不再传播（无法通过X滚动到达包装）。

我尝试过将z-indexes和overflow-y/x更改为unset元素。到目前为止没有结果，我想知道是否还有其他解决方法。

提前致谢。

Answer 1

将以下css行添加到需要水平滚动的div：

-webkit-overflow-scrolling: touch;

我在Android上测试过它的确有效。在iOS上，它不起作用。上面的设置应该可以解决问题。