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

Posted 2023-03-06

【中文标题】材质对话框在打开时将主体滚动到顶部

【英文标题】：Material Dialog scrolls body to top on open

【发布时间】：2020-03-01 03:47:54

【问题描述】：

我在 React 应用程序中使用 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>

【问题讨论】：

你能提供带有代码的实例吗？

【参考方案1】：

我对此的解决方案是将event.preventDefault() 添加到处理程序。

【参考方案2】：

只需将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/