Javascript 按向下箭头键聚焦列表项

我正在创建一个自定义的自动建议框，我需要按箭头向下移动

li

项

所以我在li中添加了tabindex属性，它得到了关注。但问题是，它以一些随机的高度向上滚动div，从而从div中取出所选的li

按向下箭头键后：

然后按一些向下箭头键：

在那之后，当鼠标按下时，它就会消失在屏幕外，表现得非常完美

在这里，我做了一个

---

首先单击

item1

，然后按向下箭头键，使其行为相同。

添加一个以确保其居中或以您希望的方式居中。

我曾经遇到过类似的问题，并根据您的需要将包含div的CSS样式

溢出设置为
无
或
隐藏
，从而解决了该问题首选项。
您是否尝试过使用锚点而不是tabindex？e、 g

<li><a href="#"></li>



根据我的经验，一些浏览器无法正确处理tabindex上的焦点问题
详细阐述我的评论

将容器的
scrollTop
设置为聚焦li的
索引
*
li高度

在按下键时返回false
，以防止浏览器正常滚动溢出的父对象

$('div.container').on('focus', 'li', function() {
    var $this = $(this);
    $this.addClass('active').siblings().removeClass();
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
    var $this = $(this);
    if (e.keyCode === 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode === 38) {        
        $this.prev().focus();
        return false;
    }
}).find('li').first().focus();

jsfiddle
看看这是不是你想要的东西？抱歉，这也支持选项卡功能，谢谢。。。正常工作但不能改变显示滚动条的要求。