时间戳

首页 > 解决方案 > 材质对话框在打开时将主体滚动到顶部

css - 材质对话框在打开时将主体滚动到顶部

问题描述

我在反应应用程序中使用 Material UI 并想在我的页面上打开一个对话框。对话框打开得很好，唯一的问题是当它打开时它会将我的页面正文滚动到顶部。

当我打开 Material Popover 和打开 Material TextBox 选择器时，也会发生滚动到顶部的行为。我已经为此寻找了几个小时的解决方案，似乎以前没有人经历过这种行为。

任何帮助将不胜感激！

openSendMatchPopup = (event) => {
  this.setState({
    ...this.state,
    anchorTargetTarget: event.target,
    dialogOpen: true,
  });
};   

<Dialog
  id='my-popover'
  open={dialogOpen}
  anchorEl={anchorTargetTarget}
  onClose={onClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'center'
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'center'
  }}
  disableRestoreFocus
>
  Dialog is Open
</Dialog>

标签： cssreactjstwitter-bootstrapmaterial-ui

解决方案

只需添加disableScrollLock到您的对话框中。像这样：

<Dialog
  id='my-popover'
  open={dialogOpen}
  anchorEl={anchorTargetTarget}
  onClose={onClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'center'
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'center'
  }}
  disableRestoreFocus
  disableScrollLock 
>
  Dialog is Open
</Dialog>

文档：https ://material-ui.com/api/modal/

推荐阅读