How to hide scroll inside div of a Component in React? - css

Question

In a React project I've details of wallet scrolling in a div named 'History'. Issue is that history details is scrolling without any issue, but, I want to hide inside 'History' div. How could it be done? Any appropriate solution?
Below is the code reference
const navScrollStyle = makeStyles((theme) => ({
root: {
marginTop: "120px",
display: "table",
overflowY: "auto",
maxWidth: "auto",
display: "flex",
justifyContent: "center"
}
}));
const navBodyStyle = makeStyles((theme) => ({
root: {
flexGrow: 1,
top: "0px",
position: "absolute",
width: "100%",
height: "100vh",
textAlign: "center",
background: "white",
zIndex: "9",
height: "100%",
overflowY: "auto"
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const gridClassStyle = makeStyles((theme) => ({
root: {
zIndex: "100",
flexGrow: 1,
position: "fixed",
top: "0px",
background: "white",
flexWrap: "nowrap",
boxShadow: "5px 10px 18px #888888"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const useStyles5 = makeStyles((theme) => ({
root: {
"& > *": {
margin: theme.spacing(1)
},
textAlign: "center",
width: "100%"
}
}));
const useStyles = makeStyles((theme) => ({
root: {
top: "20px",
width: "100%",
maxWidth: "auto"
},
nested: {
paddingLeft: theme.spacing(4)
}
}));
const TestPageScroll = () => {
const navBody = navBodyStyle();
const navScroll = navScrollStyle();
const gridClass = gridClassStyle();
const classes5 = useStyles5();
const classes = useStyles();
const NavPart = () => (
<Grid className={gridClass.root} container spacing={3}>
<Grid item xs={4} style={{ textAlign: "left" }}>
<IconButton
edge="start"
className={gridClass.menuButton}
color="inherit"
aria-label="menu"
>
<Link to="/">
<ArrowBackIcon />
</Link>
</IconButton>
</Grid>
<Grid
item
xs={4}
style={{ textAlign: "center", justifyContent: "center" }}
>
<Typography variant="h6" className={gridClass.title}>
<h2>Test Scroll</h2>
</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: "right", marginTop: "2%" }}>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
>
<AccountCircle style={{ fontSize: "30px" }} />
</IconButton>
</Grid>
</Grid>
);
return (
<div className={navBody.root}>
{NavPart()}
<div className={navScroll.root}>
</div>
{/* Here the main code begins */}
<div style={{ height: "100px" }}>
<div
style={{
position: "fixed",
zIndex: "100",
background: "white",
width: "100%"
}}
>
<h2>History</h2>
</div>
<hr />
<List
component="nav"
aria-labelledby="nested-list-subheader"
className={classes.root}
>
<>
{/* Here purposely List are added to test overflow */}
<div style={{ overflowY: "auto", background: "red" }}>
<ListItem>
<h6>Wallet History1</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
</div>
</>
</List>
</div>
</div>
);
};
As you can see below in the picture, Wallet history details is seen clearly which I want to hide inside 'History' div
Here is the codesandbox link for your reference: https://codesandbox.io/s/react-material-forked-71op5
Please click on 'WALLET' button when page loads

Answer 1

The problem is your History div is fixed and your Wallet History List div has no bounds on height which is getting scrolled behind the fixed divs above. one way to solve this problem is to limit your height of your Wallet History List div and make it fixed as well.
eg. add these style to your div for list
maxHeight : "800px", position :"fixed", width:"100%"