css - 如何在 React 中隐藏组件的 div 内的滚动?
问题描述
在一个 React 项目中,我在名为“History”的 div 中详细介绍了钱包滚动。问题是历史详细信息正在滚动没有任何问题,但是,我想隐藏在“历史”div 中。怎么可能做到?有什么合适的解决方案吗?
下面是代码参考
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>
);
};
正如您在图片中看到的那样,可以清楚地看到钱包历史详细信息,我想将其隐藏在“历史”div 中
这是供您参考的codesandbox链接:https ://codesandbox.io/s/react-material-forked-71op5 请在页面加载时点击“WALLET”按钮
解决方案
问题是你的History
div
isfixed
并且你Wallet History List div
没有界限在上面的 sheight
后面滚动。fixed div
解决这个问题的一种方法是限制你height
的, Wallet History List div
并把它fixed
也做到。
例如。将这些样式添加到您的div
for 列表
maxHeight : "800px", position :"fixed", width:"100%"
推荐阅读
- django - 我可以在小型 VPS 上运行 Eclipse che 吗?
- python - 使用 multiprocessing.pool 嵌套 for 循环
- php - 虽然我使用 isset,但我得到一个未定义的索引错误
- sql-server - 如何在 TSQL 中有条件地返回“For XML”和“For JSON”
- rust - 序列化结构上的子属性似乎不起作用
- sql - SQL查询比较2个搜索结果之间的列
- python - 输入包含 NaN、无穷大或对于 dtype('float32') 来说太大的值
- types - 创建依赖于其元素之一的用户定义类型
- css - Bootstrap CSS CDN 在某些系统中加载,而在其他系统中不加载
- system-verilog - 动态数组构造函数是否调用删除?