Javascript 基于鼠标滚动增量的列表项重点突出显示

我有一个下拉菜单，需要根据鼠标滚动增量突出显示列表项。当用户将鼠标悬停在列表上并向上或向下滚动1x时，应突出显示紧接上方或下方的项目。这涉及到我相信的鼠标滚动活动的三角洲。问题是这个deltaY值是超敏感的。因此，即使有轻微的向上滚动动作，它也会将其记录为7x/8x之类的疯狂动作。我应该如何处理此功能

这就是我目前拥有的（但如果效果更好，请随意提出完全不同的建议）：

***（另外，（event.target.id[event.target.id-1]）这不起作用。我做错了什么？）

highlightListItem（事件：任意，向上滚动？：布尔，向下滚动？：布尔）：无效{
this.highlightTimer=setTimeout（（）=>{
this.someService.highlightListItem（event.target.id）；
}, 450);
如果（向上滚动）{
this.highlightListItem=setTimeout（（）=>{
this.someService.highlightListItem（event.target.id[event.target.id-1]）；
}, 450)
}else if（向下滚动）{
this.highlightTimer=setTimeout（（）=>{
this.someService.highlightTimer（event.target.id[event.target.id-1]）；
}, 450);
}
scrollEvent（事件：任意）：无效{
console.log（event.deltaY*100）；
if（event.deltaY<0）{
this.highlightListItem（事件、false、true）；
}else if（event.deltaY>0）{
this.highlightListItem（事件、真、假）；
}
}

@nhminshaq以共享JSFIDLE或codepen为例？嗨，纳伦，谢谢你的回答。找到了一个在滚动时返回元素可见性的好JSFIDLE示例。了解该值有助于选择数组中的下一个元素并顺利过渡到该元素。如果有人感兴趣，这里是JSFIDLE：