如何使用 ReactJS 检测鼠标滚动按钮向下事件？

Question

我无法理解如何使用 react 的 onMouseDown 事件检测“mouse3”/鼠标滚动按钮向下事件。

我在某些元素上使用onMouseDown ：

  <Menu.Item
    icon={<DashboardOutlined style={{ fontSize: '21px' }} />}
    onClick={onClickDash}
    onMouseDown={handleEvent}
  >
    Dashboard
  </Menu.Item>

然后是handleEvent：

const handleEvent = (event) => {
  if (event.type === 'mousedown') {
    console.log('MOUSE DOWN', event);
  } else {
    console.log('MOUSE UP', event);
  }
};

问题是，我找不到专门检测鼠标向下滚动按钮的方法。 我怎样才能检测到呢？ 官方的 mozilla 文档也没有提供示例。

Answer 1

免责声明 -在撰写本文时，我只针对 Chrome 浏览器。

当用户滚动时，会触发 DOM滚动事件，该事件默认内置于浏览器中。 React 有它自己的方法onScroll ，当滚动事件被触发时，它可以在任何组件上调用。 使用这个 onScroll 方法，我们可以调用 function 作为用户滚动的结果。

例子;

<SomeComponent onScroll={someMeothod} />

与任何 DOM 事件一样，事件 object 被创建，其属性可以提供有关事件的有用信息以及与该事件相关的元素。 用户滚动的每个像素都会触发一个滚动事件。 在这种情况下，我们只关心识别用户何时滚动到包含我们内容的父元素的末尾。

计算用户何时滚动到容器的末尾

将onScroll方法添加到包含在组件 class 上调用 function 的内容的元素：

<div className="content-container" onScroll={this.handleScroll}>
  // Your content
</div>

然后创建handleScroll function来处理滚动事件：

class MyComponent extends React.Component {
  handleScroll = e => {
    let element = e.target
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
      // do something at end of scroll
    }
  }
  render() {
    return (
      <div className="content-container" onScroll={this.handleScroll}>
        // Your content
      </div>
    )
  }
}

让我们分解一下handleScroll方法中发生的事情，让事情更清楚一点……

e -这对应于事件本身。 它是由浏览器创建的 object，具有与我们正在使用的滚动事件相关的属性。

let element = e.target -这允许我们找到使用（ e.target ）调度事件的元素并将其分配给我们可以在代码的 rest 中使用的变量。

现在我们（我们的代码）知道哪个元素正在被滚动，并且我们已经在我们的方法 scope 中将它分配给一个变量，我们可以访问浏览器给出的该元素的属性并计算用户是否已经滚动到最后。

element.scrollHeight -这是元素内容的像素高度，包括由于 css 溢出而在屏幕上不可见的内容。

element.scrollTop -元素内容垂直滚动的高度（以像素为单位）。

element.clientHeight - 元素可滚动部分的高度（以像素为单位）。

使用上面的属性，我们可以通过将scrollHeight和scrollTop的负和与clientHeight进行比较来计算用户是否已经滚动到元素的底部。 如果它们相同，则用户已滚动到元素的底部。 因此，通过将其包装在if语句中，我们可以确保 if 语句的 scope 中的 function 仅在用户滚动到 div 末尾并且满足我们的if条件时运行。