Html 表格在中间水平滚动，就像在触摸屏上一样

Posted 2023-03-05

【中文标题】Html 表格在中间水平滚动，就像在触摸屏上一样

【英文标题】：Html table horizontal scroll in the middle like on touchscreens

【发布时间】：2022-01-18 00:58:02

【问题描述】：

我正在尝试水平滚动表格，而不是使用滚动条，而是使用表格内的鼠标，就像使用触摸屏完成一样。有谁知道没有插件是否可以做到这一点？让表格水平“可拖动”只是为了滚动？

Ps.：我知道下面的 sn-p 在移动模式下做了我想要的，但我想用鼠标来实现。

.container 
  width: 30em;
  overflow-x: auto;
  white-space: nowrap;

<div class="container">
  <table>
    <tbody>
      <tr>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
      </tr>
      <tr>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
      </tr>
    </tbody>
  </table>
</div>

【参考方案1】：

您可以在桌子上使用鼠标事件来实现此行为 在 mousedown 上设置标志以开始拖动 在 mouseup 上取消设置标志 on mousemove 计算水平移动并应用于表格水平滚动

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。