javascript - 确保打开的下拉菜单在视口(viewport)中可见

Question

我有一个 react 组件，它是一个下拉列表。每次打开下拉菜单时，我都需要检查整个下拉菜单是否在视口(viewport)/可见中(特别是对于移动设备)如果下拉菜单被视口(viewport) chop ，则需要滚动，以便整个下拉菜单可见(话虽如此，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();