javascript - 如何识别正在使用哪个元素滚动？

Question

我有一个 react 组件，在其中单击按钮〜我会显示菜单选项的下拉菜单。

菜单溢出和浏览器屏幕溢出均已启用。

我的要求是当用户滚动菜单时。无需更改。但是，如果菜单打开并且用户尝试滚动浏览器滚动条 - 菜单应该关闭。

我要做什么才能实现这一目标？

  private handleMenu = (condition)? debounce(() => this.closeAllMenus(), 500, 
   {
    leading: true
   }) : debounce((event) => {}, 0, {});

在这里，我在寻找“条件”时遇到了问题

条件应该等于用户滚动浏览器滚动时获取实例。

如果为真，我将关闭菜单下拉菜单一段时间。 如果为 false(即用户实际上正在使用菜单滚动)- 则不执行任何操作。

它的调用方式如下:-

private addEventListeners() {
    document.addEventListener("scroll", this.handleMenu, true);   
  }

  private removeEventListeners() {
    document.removeEventListener("scroll", this.handleMenu, true);
  }

以下是我尝试过的“条件”条件:-

1. window.scrollY - 但是，这并不能告诉我用户当前是否正在滚动它。

   它只会告诉我 Y 坐标。

   我如何知道当前正在使用哪个卷轴。

2. document.activeElement.mouseleave - 但这只会告诉我鼠标指针不在菜单上。但并不是使用浏览器的滚动。

   我如何知道当前正在使用哪个卷轴？

3. 使用 document.body.style.overflow = "hidden"禁用浏览器滚动。但是，这不是推荐的方法。

该图像底部有一个按钮 -

单击按钮后，将打开一个菜单，如图所示 -

我如何知道当前我的浏览器滚动条是否正在滚动。

  private handleMenu = (condition)? debounce(() => this.closeAllMenus(), 500, 
   {
    leading: true
   }) : debounce((event) => {}, 0, {});

我的要求只是在用户尝试滚动浏览器滚动时关闭菜单，并在用户尝试滚动菜单元素滚动时保持菜单打开。

编辑:-

根据以下答案之一的建议，我将方法更改为以下代码:-

private handleMenu = (event: MouseEvent) => {
    event.preventDefault();
    window.onscroll = () => {
      this.closeAllMenus();
    }
  }

Answer 1

尝试使用“滚动”事件

window.addEventListener('scroll', yourFunction());

根据文档，根据给定函数的内容，您可能希望出于性能原因对其进行限制。因此，您可以使用超时来阻止其在调用之间的给定时间内执行。

但是使用此事件，您可以知道用户何时滚动，并且只需使用回调来关闭给定的窗口。

要注册元素上的滚动事件，您可以使用“onscroll”属性。