Question

我使用React Material UI library并使用Drawer作为菜单侧栏。

由于某些奇怪的原因，抽屉不允许您在移动设备上滚动。这是link。

这是我的代码：

                 <Drawer
                    className="drawer"
                    containerClassName="drawer-container"
                    docked={false}
                    open={this.state.open}
                    zDepth={2}
                    onRequestChange={open => this.setState({ open })}>


                    <Link className="item" to="/"> <img src={acm_logo} alt="Logo" style={{ width: '100%' }} /></Link>

                    <div style={{ width: '100%' }}>
                        <MenuItem
                            className="left-menu-item" containerElement={<Link to="/" />} focusState="focused"
                            onTouchTap={this.handleClose}
                            leftIcon={<i className="material-icons md-36">dashboard</i>}>Dashboard</MenuItem>
                        <MenuItem
                            className="left-menu-item" containerElement={<Link to="/emergency-waste-removal" />}
                            onTouchTap={this.handleClose}
                            leftIcon={<i className="material-icons md-36">warning</i>}>Emergency Waste
                            Removal</MenuItem>
                        <MenuItem
                            className="left-menu-item" containerElement={<Link to="/terms-conditions" />} onTouchTap={this.handleClose}
                            leftIcon={<i className="material-icons md-36">description</i>}>Terms and
                            Conditions</MenuItem>
                    </div>
                </Drawer>

任何人都知道为什么会这样或者我如何解决这个问题？

Answer 1

今天我遇到了类似的问题。经过大量研究后，我发现移动设备上的chrome视口高度包括地址栏占用的高度。

在底部添加几个空白菜单项，修复了我的滚动问题。

Material-UI Drawer不会在移动设备上滚动

1 个答案: