Material UI - body scroll locked - reactjs

Question

During my running project, I was using Material UI. I was designing a dashboard for my site.
Then I noticed that my scroll bar was being blocked while every time I opened the menu list.
Just like the following image:
I copied this code from MaterialUI official webiste. I still its blocking the scroll bar. Where is the code:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import IconButton from '#mui/material/IconButton';
import Typography from '#mui/material/Typography';
import Menu from '#mui/material/Menu';
import MenuIcon from '#mui/icons-material/Menu';
import Container from '#mui/material/Container';
import Avatar from '#mui/material/Avatar';
import Button from '#mui/material/Button';
import Tooltip from '#mui/material/Tooltip';
import MenuItem from '#mui/material/MenuItem';
const pages = ['Products', 'Pricing', 'Blog'];
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
const ResponsiveAppBar = () => {
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
return (
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
<Typography
variant="h6"
noWrap
component="div"
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page}
</Button>
))}
</Box>
<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
);
};
export default ResponsiveAppBar;
What I have to do to fix this bug?

Answer 1

The issue is from the Menu component, when it is open it styles the body element overflow to hidden.
To stop that, Set the disableScrollLock prop to true.
<Menu
...others
disableScrollLock={true}
>
</Menu>

Answer 2

I'm not sure if this is a problem with your AppBar as much as your other code, which we cannot see.
But I'm guessing you have something like this:
export default function App(){
return (
<div className="root">
<ResponsiveAppBar />
<div className="image-background-1">
<h1>Some text</h1>
</div>
<div className="image-background-2">
<h1>Some text</h1>
</div>
<div className="image-background-3">
<h1>Some text</h1>
</div>
</div>
)
}
In this scenario, the whole "root" div is scrolling, but in your design we really just want to scroll through the divs with the image background.
To fix this, wrap those divs in a div that has overflow-y: scroll:
export default function App(){
return (
<div className="root">
<ResponsiveAppBar />
<div style={{overflowY: "scroll"}}>
<div className="image-background-1">
<h1>Some text</h1>
</div>
<div className="image-background-2">
<h1>Some text</h1>
</div>
<div className="image-background-3">
<h1>Some text</h1>
</div>
</div>
</div>
)
}
You might need to set overflow: "hidden" on the root div as well.