时间戳

首页 > 解决方案 > Material UI - 打开弹出框时取消阻止滚动

reactjs - Material UI - 打开弹出框时取消阻止滚动

问题描述

根据新的 material-ui 版本文档，滚动被 Popover 阻止。

当我打开弹出框时，网页的滚动条突然消失了，我认为这不是用户体验的一部分。

我想在弹出窗口打开时保持滚动条可见。

我正在使用 Material-UI V3.8.1。

标签： reactjsmaterial-uipopover

解决方案

它可以通过使用 Popover 的容器道具来修复。容器 props 是一个节点、组件实例或返回其中任何一个的函数。容器将传递给 Modal 组件。默认情况下，它使用anchorEl 的顶级文档对象的主体，所以大多数时候它只是document.body。此默认设置是使文档删除滚动条。所以我只是使用它的直接父容器而不是默认设置，它解决了这个问题。:)

<Popover
  open={...}
  anchorEl={...}
  anchorOrigin={...}
  container={this.AnchorEl.parentNode}
>

谢谢

推荐阅读