React：如何使用向上/向下箭头选择滚动列表中的上一个/下一个项目并使列表滚动以将所选元素保留在屏幕上

Question

我正在使用 react-infinite 滚动列表，并且我实现了一个向上/向下箭头处理程序：

onKeyDown = (e) => {
    if(e.keyCode === 40){
        if (this.props.onKeyDown) {
            e.preventDefault()
            this.props.onKeyDown()
        }
    }
    else if (e.keyCode === 38) {
        if (this.props.onKeyUp) {
            e.preventDefault()
            this.props.onKeyUp()
        }
    }
}

（该组件可在整个应用程序中重复使用，因此我通过 props 传递实际功能）

这适用于选择列表中的下一个/上一个项目。但是当您到达滚动列表的边缘并继续前进时，列表不会滚动以使所选项目保持在视图中。选定的项目会从屏幕上消失。

任何帮助将不胜感激！

Answer 1

您需要方法scrollIntoView。它存在于每个元素上。您还需要通过获取元素的offsetTop 并与组件的offsetHeight 进行比较来检测元素何时呈现在屏幕外，当此数字高于组件的offsetHeight 时，您需要将其滚动到视图中。