材质UI -菜单组件锁定主体滚动条

Question

我使用Material-ui menu组件制作了一个下拉菜单。问题是，一旦下拉菜单打开，主体滚动条就消失了，无法在页面上滚动。

我试图找到答案，但只有几个答案Popper，弹出窗口或选择组件，但似乎没有答案的菜单组件。

DropDownMenu组件是这样的。

import React from 'react'
import Menu from '@material-ui/core/Menu'
import MuiMenuItem from '@material-ui/core/MenuItem'
import styled from 'styled-components'
import MoreVertIcon from '@material-ui/icons/MoreVert'
import IconButton from '@material-ui/core/IconButton'
import SendIcon from '@material-ui/icons/Send'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
const MenuItem = styled(MuiMenuItem)`
justify-content: flex-end;
`
export default function DropDownMenu() {
const [anchorEl, setAnchorEl] = React.useState(null)
const handleClick = (event) => {
setAnchorEl(event.currentTarget)
}
const handleClose = () => {
setAnchorEl(null)
}
return (
<div>
<IconButton
style={{ padding: 0 }}
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon style={{ fontSize: 15 }} />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
getContentAnchorEl={null}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
</Menu>
</div>
)
}

菜单道具锐化代码如下:

<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
getContentAnchorEl={null}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SendIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>

工作示例可以在https://codesandbox.io/s/billowing-cache-042j1?file=/src/App.js中看到提前谢谢。

Answer 1

设置disableScrollLock为true。这个道具来自材质UIModal组件，但它也可用于Menu组件。

<Menu
...others
disableScrollLock={true}
>
</Menu>

Answer 2

您应该使用Popper而不是Menu。您也应该创建ref并将其用于IconButton或Button。

import React from 'react'
import ClickAwayListener from '@material-ui/core/ClickAwayListener'
import Grow from '@material-ui/core/Grow'
import Paper from '@material-ui/core/Paper'
import Popper from '@material-ui/core/Popper'
import MenuItem from '@material-ui/core/MenuItem'
import MenuList from '@material-ui/core/MenuList'
import IconButton from '@material-ui/core/IconButton'
import MoreVertIcon from '@material-ui/icons/MoreVert'
import SendIcon from '@material-ui/icons/Send'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'

export default function DropDownMenu(props) {
const [open, setOpen] = React.useState(false)
const anchorRef = React.useRef(null)
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen)
}

const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return
}
setOpen(false)
}
function handleListKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault()
setOpen(false)
}
}
const handleClick = () => {
// handle menu click here
setOpen(false)
}
return (
<div>
<IconButton
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
size="small"
>
<MoreVertIcon fontSize="small" />
</IconButton>
<Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem  onClick={handleClick}>
<ListItemIcon>
<SendIcon fontSize="small"/>
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
<MenuItem onClick={handleClick}>
<ListItemIcon>
<SendIcon fontSize="small"/>
</ListItemIcon>
<ListItemText primary="Sent mail" />
</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
)
}

在Material UI Menus Documentation中也有一个示例代码。