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

Posted 2023-02-22

【中文标题】Material-UI Drawer 在移动设备上不滚动

【英文标题】：Material-UI Drawer does not scroll on mobile

【发布时间】：2017-11-26 00:56:52

【问题描述】：

我正在使用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  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>

任何人都知道为什么会发生这种情况或我可以如何解决这个问题？

【问题讨论】：

我不确定Drawer 是否使用它，但您的应用程序中是否包含react-tap-event-plugin？

@MarkRabey 是的，我已将其包含在我的 index.js 中

@user3574492 你设法解决这个问题了吗？我也有同样的问题。

【参考方案1】：

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

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