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

Question

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

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

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

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

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

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

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

如果为真，我将关闭菜单下拉菜单一段时间。如果为假，(即用户实际上正在使用菜单滚动)-什么都不做。

这是这样调用的:-

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

尝试利用'scroll'事件使用

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

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

但是使用这个事件你知道用户何时滚动并且只使用回调来关闭给定的窗口。

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