我在应用程序栏下使用了一个带有画布作为主要内容的抽屉式菜单。我在抽屉中有三个可折叠卡片,当所有卡片都设置为默认展开时,页面会显示垂直滚动条和body元素下方的白色空白区域。如果您关闭这三张卡片,则滚动条会消失。如果重新打开卡片,则滚动条不会出现。问题似乎只在加载页面时全部展开三张卡片时出现。
我们的短期解决方案是仅打开两张卡片,但我想指出即使打开两张卡片,抽屉中的内容也会超出窗口而没有滚动条。抽屉的CSS也不应该是问题。还有其他人遇到这个问题吗?
drawerPaper: {
position: 'relative',
width: 400,
overflowX: 'hidden',
overflowY: 'hidden',
'&:hover': {
overflowY: 'auto',
},
'&::-webkit-scrollbar': {
display: 'none',
},
},
<MuiThemeProvider theme={this.state.useDarkTheme ? darkTheme : lightTheme}>
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
<Toolbar>
<div className={classes.flex}>
<Typography className={classes.headerTextColor} variant="title">
Title
</Typography>
{sealedBy}
</div>
<HeaderTools />
<Tooltip id="toggle-icon" title="Toggle light/dark theme">
<IconButton className={classes.headerTextColor} onClick={this.toggleTheme}>
<BrightnessMediumIcon />
</IconButton>
</Tooltip>
</Toolbar>
{spinner}
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.fixedWidth}>
<div className={classes.toolbar} />
<DocumentTools />
<SealingTools />
<AnnotationTools />
</div>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<DrawingCanvas />
</main>
</div>
</MuiThemeProvider>