Javascript 反应:如何使用向上/向下箭头选择滚动列表中的上一个/下一个项目,并使列表滚动以使所选元素保持在屏幕上
我使用的是react无限滚动列表,并实现了一个向上/向下箭头处理程序:Javascript 反应:如何使用向上/向下箭头选择滚动列表中的上一个/下一个项目,并使列表滚动以使所选元素保持在屏幕上,javascript,html,css,reactjs,web-deployment,Javascript,Html,Css,Reactjs,Web Deployment,我使用的是react无限滚动列表,并实现了一个向上/向下箭头处理程序: onKeyDown = (e) => { if(e.keyCode === 40){ if (this.props.onKeyDown) { e.preventDefault() this.props.onKeyDown() } } else if (e.keyCode === 38) { if (t
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()
}
}
}
(该组件在整个应用程序中都是可重用的,因此我通过道具传递实际功能)
此操作可用于选择列表中的下一个/上一个项目。但当您到达滚动列表的边缘并继续时,列表不会滚动以保持所选项目在视图中。所选项目在屏幕外消失
任何帮助都将不胜感激 你需要这个方法。它存在于每个元素上。此外,您还需要通过获取元素的
offsetTop
来检测元素何时被渲染到屏幕外,并与组件的offsetHeight
进行比较,当该数字高于组件的offsetHeight
时,您需要将其滚动到视图中。您是否为我们提供了onkeypup和-down功能。这样我可以让我的答案更具针对性。这肯定让我接近了。不幸的是,react infinite组件不像普通的滚动条。例如,我的offsetHeight
是20。但是我的offsetTop
始终是成百上千的。我仍然在玩scrollIntoView
,不过。。。它几乎起作用了。这真的很紧张,和我现在设置的方式不一致let elem=document.getElementById('selected')
elem.scrollIntoView({block:“start”,behavior:“smooth”})
这些事情很难正确设置,但如果正确设置,则值得。这需要大量的尝试和错误。