Javascript 在为上/下箭头添加侦听器时以编程方式控制滚动条

我试图让用户使用上/下箭头浏览列表。我无法自动控制滚动条。也就是说，当用户到达最后可见的元素时，了解何时以及在多大程度上移动滚动条

这个问题很可能是重复的，但花了一段时间后，我们找不到类似的问题

$（文档）.on（'keydown'，函数（e）{
如果（e.which==40）{
e、 预防默认值（）；
变量$selected=$（'.selected'）；
如果（$selected.next（）.length！==0）{
$（'li'）.removeClass（'selected'）；
$selected.next（）.addClass（'selected'）；
}
}
如果（e.which==38）{
e、 预防默认值（）；
变量$selected=$（'.selected'）；
如果（$selected.prev（）.length！==0）{
$（'li'）.removeClass（'selected'）；
$selected.prev（）.addClass（'selected'）；
}
}
});
li{
高度：100px；
边框：实心；
}
李先生当选{
背景：红色；
}
保险商实验室{
溢出y：自动；
宽度：150px；
高度：300px；
列表样式类型：无；
}


A
B
C
D
E
F
G
H
我
J
与其控制滚动条本身，不如将其视为设置列表的滚动位置，以便所选项目在视图中

您可以阅读
offsetTop
属性（或JQuery中的
offset（）.top
）来查找所选项目的顶部偏移，然后稍微调整以使其居中

这并不完美，但接近您想要的：