Material UI - 菜单组件锁定正文滚动条

Question

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

我试图找到答案，但 Popper、Popover 或 Select 组件只有几个答案，但菜单组件似乎没有答案。

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

您应该使用 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.

也有它的示例代码

Answer 2

将 disableScrollLock 属性设置为 true。此道具来自 Material UI Modal 组件，但它也可用于 Menu 组件。

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

</Menu>

Material UI - 菜单组件锁定正文滚动条

Material UI - Menu Component locks body scrollbar

scroll

drop-down-menu

reactjs

material-ui

disable