reactjs 滚动页面时，悬停时的弹出窗口应消失-React的材料UI(MUI)v5

dzjeubhm 于 2023-01-25 发布在 React

关注(0)|答案(1)|浏览(152)

bounty将在7天后过期。回答此问题可获得+200声望奖励。dprothero希望引起更多人关注此问题。

当我按照MUI v5标准模式在悬停另一个元素时显示弹出窗口时，它工作正常，除非您
1.将鼠标悬停在元素上
1.在不移动鼠标的情况下，使用滚轮滚动文档
1.即使在触发元素滚动离开后，弹出框仍然可见
这是常见的代码片段：

<div style={{ height: "100vh", overflow: "auto" }}>
      <div style={{ height: 1000 }}>
        <Typography
          aria-owns={open ? "mouse-over-popover" : undefined}
          aria-haspopup="true"
          onMouseEnter={handlePopoverOpen}
          onMouseLeave={handlePopoverClose}
        >
          Hover and then scroll
        </Typography>
        <Popover
          id="mouse-over-popover"
          className={classes.popover}
          classes={{
            paper: classes.paper
          }}
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          onClose={handlePopoverClose}
          disableRestoreFocus
        >
          <Typography>I use Popover.</Typography>
        </Popover>
      </div>
    </div>

这里有一个full working demo演示了这个问题。
我怎样才能使弹出窗口在用户滚动文档时消失？我不想禁用滚动。

reactjs

来源：https://stackoverflow.com/questions/75190974/popover-on-hover-should-disappear-when-page-is-scrolled-material-ui-mui-v5-f

1条答案

按热度按时间

63lcw9qa1#

为什么不添加一个事件监听器来监听某个元素（或页面中的任何元素）的scroll事件，并在scroll事件被触发时调用handlePopoverClose事件呢？基本上只需要在组件中添加以下几行：

...
  // on mount, listen to scroll event on any element in the page (document, and its child)
  // if scroll is triggered, close the popover
  React.useEffect(() => {
    document.addEventListener("scroll", handlePopoverClose, true);
  }, []);

  // on unmount, remove the scroll event listener
  React.useEffect(
    () => () => {
      document.removeEventListener("scroll", handlePopoverClose, true);
    },
    []
  );
  ...

这是working fork demo。注意，true被设置为向页面的任何子元素添加滚动事件侦听器。您也可以仅向特定元素添加滚动事件侦听器，但当滚动是由其他元素（或窗口）引起时，它无法解决问题。

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 滚动页面时，悬停时的弹出窗口应消失-React的材料UI(MUI)v5

1条答案

相关问题

热门标签

最新问答