Question

我有一个react组件，它是一个下拉列表。每次打开下拉菜单时，我需要检查整个dromdown是否在视口中/可见（特别是对于移动设备）如果下拉菜单是由视口切断的，则需要滚动，以便整个下拉菜单可见（据说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是下拉按钮的参考。选项部分也位于绝对位置

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

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

2 个答案: