Question

我正在使用material-ui演示中的响应抽屉示例。在响应式抽屉中，我创建了一个包含onClick处理程序的项目菜单，以使mainView将所需的项目滚动到视图中。当页面为桌面大小时，抽屉将打开，并且一切正常。当抽屉在移动中打开时，会出现问题。并且视图被覆盖。在这种情况下，滚动不起作用，因为窗口被响应式抽屉覆盖。我可以通过click事件关闭抽屉，但是下面的视图不会滚动。

我创建一个带有列表项菜单的抽屉：

       let rows = this.sectionVals.map((section) => (
            <ListItem button key={section.name} onClick={(e) => {this.onSectionClick(section.field)}}>
               <ListItemText primary={section.section} />
            </ListItem>
        ));

        return (
            <div>
              <div className={classes.toolbar}  style={{backgroundColor: ccolor}}/>
                <Divider />
                <List>
                    {rows}
                </List>
            </div>
        );

我保存要滚动到视图中的元素的位置：

       var screenPos = elt.getBoundingClientRect();

            if(this.state.mobileOpen === true ) {

                this.setState({
                    mobileOpen: false,
                    scrollPosX: screenPos.left,
                    scrollPosY: screenPos.top
                });
            }

            elt.scrollIntoView({
                behavior: "smooth",
                block: "center",
                inline: "start"
            });

这些是我尝试过的东西

 handleDrawerToggle() {

        this.setState(state => ({ mobileOpen: !state.mobileOpen }));
        window.scrollTo(this.state.scrollPosX, this.state.scrollPosY);

    };

     componentDidUpdate(prevProps, prevState, snapshot) {
        window.scrollTo(this.state.scrollPosX, this.state.scrollPosY);
     }

在移动设备中打开抽屉时，我希望移动用户能够单击某个部分，并且基础视图应滚动到该部分，以便在抽屉关闭时，他们正在查看所需的部分。

在移动设备中打开抽屉时，如何触发滚动到抽屉下方的窗口？我可以在该窗口中找到所需的元素，但是当抽屉打开时，所有滚动尝试都失败了。

如何在响应式抽屉下滚动？

0 个答案: