我在React应用程序中使用Material UI,并想在页面上打开一个对话框。对话框可以很好地打开,唯一的问题是打开对话框时,它将页面的主体滚动到顶部。
当我打开“材质弹出框”和打开“材质文本框”选择器时,也会发生滚动到顶部的行为。我已经搜寻了数小时的解决方案,似乎以前没有人经历过这种行为。
任何帮助将不胜感激!
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>
答案 0 :(得分:0)
我对此的解决方案是将 event.preventDefault()
添加到处理程序中。
答案 1 :(得分:0)
只需将 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>