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

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

尝试使用“滚动”事件

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

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

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

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

Answer 2

尝试使用类函数 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);

}

这将在用户滚动时更新您的函数，检测到 scrollY 但这可以通过任何滚动 JS 属性进行更改希望这会有所帮助:)