Html table horizontal scroll in the middle like on touchscreens

user_9932359 0
Viewed 54

I'm trying to horizontal scroll the table not with the scrolling bar, but with the mouse inside the table just like its done with a touch screen. Does anyone know if its possible to do this without a plugin? To make the table horizontally "draggable" just for scrolling?

Ps.: I know that the snippet below does what I want in mobile mode, but I want to achieve that with the mouse.

.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>
enter image description here

html-table html javascript
1 Answers

you can use mouse events on the table to achieve this behavior on mousedown to set a flag to start dragging on mouseup to unset the flag on mousemove to calculate the horizontal movement and apply to the table horizontal scroll

user_97846560
Related