Javascript 如何识别正在使用的元素滚动？

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

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

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

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

在这里，我面临着寻找“条件”的问题

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

如果为真，我将关闭菜单下拉列表一段时间。 如果为false（即用户实际使用的是菜单滚动），则不执行任何操作

这被称为：-

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

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

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

然而，这并不能告诉我用户当前是否正在滚动它

它只会告诉我Y坐标

我如何知道当前使用的是哪个卷轴。

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

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

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

此图像底部有一个按钮-

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

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

我的要求是，当用户试图滚动浏览器滚动时，关闭菜单，如果用户试图滚动菜单元素滚动，则保持菜单打开。

编辑：-

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

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

---

尝试使用“滚动”事件

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

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

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

---

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

尝试使用

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

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

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

---

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

尝试使用类函数ComponentDidMount（），当组件加载到窗口中时，这将装载代码

constructor(props)
{
    super(props);
    this.state = ({
        scrollYnow: 0,
    });
    this.trackScrolling = this.trackScrolling.bind(this);
}
trackScrolling = () => {
    this.setState({scrollYnow: window.scrollY})
    console.log(this.state.scrollYnow);
}
componentDidMount() {

        document.addEventListener('scroll', this.trackScrolling);

}

---

这将在用户滚动、检测滚动时更新您的函数，但这可以通过任何scroll JS属性进行更改。希望这有帮助：）

尝试使用类函数ComponentDidMount（），这将在组件加载到窗口时装载代码

constructor(props)
{
    super(props);
    this.state = ({
        scrollYnow: 0,
    });
    this.trackScrolling = this.trackScrolling.bind(this);
}
trackScrolling = () => {
    this.setState({scrollYnow: window.scrollY})
    console.log(this.state.scrollYnow);
}
componentDidMount() {

        document.addEventListener('scroll', this.trackScrolling);

}

---

这将在用户滚动、检测滚动时更新您的函数，但这可以通过任何滚动JS属性进行更改，希望这有帮助：）

我已经在调用上面的私有方法This.addEventListeners（）；在componentDidMountOk中，当用户滚动时，您希望检测什么@MansiManhasI已经在调用上面的私有方法this.addEventListeners（）；在componentDidMountOk中，当用户滚动时，您希望检测什么@曼西曼纳斯