时间戳

首页 > 解决方案 > 如何识别正在使用哪个元素滚动？

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

问题描述

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

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

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

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

  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" 禁用浏览器滚动。但是，这不是推荐的方法。

此图像底部有一个按钮 -

https://ibb.co/552TSnJ

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

https://ibb.co/BgsmYSm

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

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

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

编辑： -

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

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

标签： javascriptreactjsevent-handlingaddeventlistenerdom-events

解决方案

尝试使用“滚动”事件

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

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

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

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

推荐阅读