Как прокрутить под отзывчивым ящиком? - PullRequest
Новая
       5

Как прокрутить под отзывчивым ящиком?

0 голосов
/ 05 апреля 2019

Я использую пример адаптивного ящика из демонстраций material-ui.В адаптивном ящике я создал меню элементов с обработчиком onClick, чтобы основной вид прокручивал нужный элемент в поле зрения.Когда страница размером с рабочий стол, ящик открыт, и все работает нормально.Проблема возникает, когда ящик открыт в мобильном телефоне;и вид прикрыт.В этом случае прокрутка не имеет никакого эффекта, так как окно перекрывается ответным ящиком.Я могу закрыть ящик из события щелчка, но вид внизу не прокручивается.

Я создаю ящик с меню пунктов списка: 

       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);
     }

Когда ящик мобильного телефона открыт, я хочу, чтобы пользователи мобильных устройств моглищелкните по разделу, и основной вид должен перейти к этому разделу, чтобы при закрытии ящика они смотрели на нужный раздел.

Как вызвать прокрутку к окну под ящиком, когда ящик открытв мобильном?Я могу найти нужный элемент в этом окне, но все попытки прокрутки потерпели неудачу, когда ящик открыт.

...