Как горизонтально прокрутить стол с колесиком мыши в режиме реагирования?

Question

Я хочу включить колесо мыши для горизонтальной прокрутки таблицы.

Как мне это сделать?

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}

logi c код:

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>
  );
}

вот мое демо: https://codesandbox.io/s/github/Kalipts/scroll_table

Answer 1

Использование события onWheel

Событие onwheel происходит, когда колесо мыши наматывается на элемент вверх или вниз.

С Element.scrollTo () , Element.scrollLeft

Метод scrollTo() интерфейса Element прокручивает до определенного набора координат внутри данного элемента .

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

---

Пример кода:

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}>

См .: Горизонтальная прокрутка на компонент React с использованием вертикального колеса мыши