React/Material UI - 防止弹出框上的正文滚动答案

【问题标题】：React/Material UI - Prevent body scrolling on popoverReact/Material UI - 防止弹出框上的正文滚动
【发布时间】：2018-04-01 02:42:55
【问题描述】：

React 和 MUI 的新手，并且有一个 UX 问题，当我们有一个弹出窗口（下拉菜单或自动选择下拉菜单）时，我们仍然可以滚动网站的主体。我看到它在 MUI 的新 beta V1 中已修复，但使用当前的稳定版本，我被要求查看是否可以破解它以停止滚动 - 但是当我们有一个弹出窗口时，我似乎无法定位/捕获任何东西出现。

示例：当前 MUI - http://www.material-ui.com/#/components/auto-complete V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/

因此，如果您在这些示例中输入内容并触发向下/弹出窗口，您会看到在当前 MUI 中，您仍然可以滚动

我希望有人可能遇到过这个问题并有他们想要分享的解决方案？

谢谢大家！

【问题讨论】：

我也遇到过这个问题。我认为关键是将 ref 附加到要滚动的适当弹出框元素上。但是，由于弹出框在窗口级别而不是组件级别呈现，因此您很可能没有应用不同滚动位置或样式的范围。

标签： reactjs material-ui

【解决方案1】：

我遇到了类似的问题，并使用“disablePortal”自动完成属性解决了它：

您可以在此处查看“disablePortal”定义： https://material-ui.com/api/autocomplete/#props

disablePortal：禁用门户行为。子级保持在其父 DOM 层次结构中。

我还必须添加一些样式以使弹出窗口相对于输入组件定位。

这里有一些例子：

const useStyles = makeStyles({
    popperDisablePortal: {
      position: 'relative',
    }
  })

const classes = useStyles()

<Autocomplete
  classes={classes}
  disablePortal={true}
  {...props}
/>

所以你可能必须：

设置 disablePortal 属性
使用“相对”位置定义关联的 popperDisablePortal 样式

编辑：实际上，此错误不应作为默认 MUI 自动完成设置的一部分发生。在我的情况下，错误是一些冲突的 CSS 属性产生了这个滚动错误。不确定你的情况，但对我来说它恰好是一些溢出：在页面 HTML 标记上定义的自动属性（有时你可以在 body 标记上找到它）。替换为溢出：“可见”和滚动错误应该消失，甚至无需更改一行自动完成组件定义。

【讨论】：