确保打开的下拉菜单在视口中可见

Question

我有一个反应组件，它是一个下拉菜单。每次打开下拉菜单时，我都需要检查整个下拉菜单是否在 viewport/visible 中（特别是对于移动设备）如果下拉菜单被视口截断，则需要滚动以便整个下拉菜单可见（说过 dorpdown 的高度会变化）。

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 是对下拉菜单的引用 button.Also 选项部分是绝对定位的

Answer 1

我相信有一个名为 scrollIntoView() 的内置方法。

应该是这样的：

dropDown.scrollIntoView();

Answer 2

字体答案。

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

确保打开的下拉菜单在视口中可见

Make sure opened dropdown is visable in viewport

javascript

viewport