React：如何使用箭头 up/down 到 select previous/next 滚动列表中的项目并使列表滚动以将 selected 元素保持在屏幕上

Question

我正在使用 react-infinite 滚动列表，我实现了一个箭头 up/down 处理程序：

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 传递实际功能）

只要选择列表中的 next/previous 项，这就有效。但是，当您到达滚动列表的边缘并继续前进时，列表不会滚动以保持所选项目在视图中。所选项目刚从屏幕上消失。

如有任何帮助，我们将不胜感激！

Answer 1

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

React：如何使用箭头 up/down 到 select previous/next 滚动列表中的项目并使列表滚动以将 selected 元素保持在屏幕上

React: How to use arrow up/down to select previous/next item in a scroll list and make the list scroll to keep the selected element on screen

html

javascript

css

web-deployment

reactjs