Убедитесь, что раскрывающийся список виден в окне просмотра

Question

У меня есть реактивный компонент, который является раскрывающимся списком. Каждый раз, когда открывается раскрывающийся список, мне нужно проверить, находится ли весь dromdown в области просмотра / видимом (особенно для мобильных устройств). Если выпадающий список обрезан по области просмотра, необходимо прокрутить, чтобы можно было увидеть весь выпадающий список (при условии, что высота спада изменяется).

componentDidUpdate(prevProps, prevState, snapshot) {


    if (prevState.isOpen === false && this.state.isOpen === true) {
        if (this.node) {
            const optionContainer = this.node.querySelector(
                '.price-dropdown-options'
            );

            const recNode = this.node.getBoundingClientRect();
            const recOption = optionContainer.getBoundingClientRect();


            if ([some logic]) {
                //window.scrollBy(0, ?????); 
            }
        }
    }
}

PS: this.node является ссылкой на выпадающую кнопку. Также раздел параметров позиционируется как абсолютный

Answer 1

Шрифт ответа.

    componentDidUpdate(prevProps, prevState, snapshot) {

    if (this.state.isOpen && this.state.isOpen !== prevState.isOpen) {
        const optionNode = this.node.querySelector('.price-dropdown-options');
        const buttonRec = this.node.getBoundingClientRect();
        const optionRec = optionNode.getBoundingClientRect();

        const height1 = buttonRec.top + buttonRec.height + optionRec.height;
        const height2 = window.innerHeight - 80; //80 is height of sticky footer

        if (height1 > height2) {
            scrollBy(0, Math.abs(height1 - height2));
        }
    }
}

Answer 2

Я полагаю, что для этого есть встроенный метод, который называется scrollIntoView().

Он должен выглядеть следующим образом:

dropDown.scrollIntoView();