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

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}

逻辑代码：

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}

这是我的演示： https: //codesandbox.io/s/github/Kalipts/scroll_table

Answer 1

使用onWheel 事件

onwheel当鼠标滚轮在元素上向上或向下滚动时，会发生该事件。

使用Element.scrollTo()、Element.scrollLeft

Element 接口的方法scrollTo()滚动到给定元素内的一组特定坐标。

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 组件上水平滚动