材质 UI - 打开弹出框时取消阻止滚动

Question

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

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

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

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

Answer 1

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

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

谢谢

Answer 2

您正在寻找的房产名为disableScrollLock。但是使用这个，不会重新计算模态定位，并且您的应用程序中将有一个浮动模态。相反，正如其他一些人所描述的那样，Popper应该使用 。

Answer 3

根据文档，看起来如果你想保留滚动条，那么你应该使用 Popper 而不是 Popover。