如何在反应中用鼠标滚轮水平滚动表格？

Question

I want to enable the mouse wheel to scroll the table horizontally.

How can I do it?

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

.container {
  overflow-x: auto;
}


tr:nth-child(even){background-color: #f2f2f2}

logic code:

function App() {
  const num = 50;
  let points_th = [];

  for(let i = 0; i < num; i++ ) {
    points_th.push(<th>Points</th>);
  }

  let row_1 = render_row('Jill', 'Smith', 50, num);
  let row_2 = render_row('Eva', 'Jackson', 94, num);
  let row_3 = render_row('Adam', 'Johnson', 67, num);
  return (
      <div>
        <div className='container'>
          <table>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              {points_th}
            </tr>
              {row_1}
              {row_2}
              {row_3}
          </table>
        </div>
      </div>
  );
}

here is my demo: https://codesandbox.io/s/github/Kalipts/scroll_table

Answer 1

Use onWheel event

The onwheel event occurs when the mouse wheel is rolled up or down over an element.

With Element.scrollTo() , Element.scrollLeft

The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element.

element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

---

Code sample:

const onWheel = e => {
  e.preventDefault();
  const container = document.getElementById("container");
  const containerScrollPosition = document.getElementById("container").scrollLeft;
  container.scrollTo({
    top: 0,
    left: containerScrollPosition + e.deltaY,
    behaviour: "smooth"
  });
};

<div className="container" id="container" onWheel={onWheel}>

Refer: Horizontal Scrolling on React Component Using Vertical Mouse Wheel