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
