移动端table表格设置左右滑动后，在table区域不能触发页面的上下滚动

Question

给table外层的div设置了overflow-x: scroll;横向滚动，此时点击表格内部进行上下拖动页面不会上下滚动了

Answer 1

这可能是因为在移动端浏览器中，当你在一个容器内部进行滚动时，它会默认禁止外部容器的滚动。如果你需要在table内部进行上下拖动页面，你可以尝试给table元素添加属性touch-action: pan-y;，这将允许table内部进行垂直滚动，并且不会阻止外部容器的滚动。

示例代码：

<div style="overflow-x:scroll;">
  <table style="touch-action: pan-y;">
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    <tr>
      <td>单元格4</td>
      <td>单元格5</td>
      <td>单元格6</td>
    </tr>
    <tr>
      <td>单元格7</td>
      <td>单元格8</td>
      <td>单元格9</td>
    </tr>
  </table>
</div>

在这个例子中，我们将touch-action: pan-y;应用到table元素上，允许内部进行垂直滚动，并且不会阻止外部容器的滚动。