javascript - 在向下箭头按下时关注列表项

Question

我正在创建一个自定义自动建议框，我需要li在向下箭头键上移动项目。

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

在向下箭头键之后：

并在按下箭头键后：

之后，当鼠标按下时，它会消失在屏幕外，表现完美。

在这里，我做了一个演示 JSFiddle ， 首先单击item1，然后按下箭头，它的行为相同。

Answer 1

详细说明我的评论

将容器设置scrollTop为index of focused li* li height。

return false在 keydown 时防止溢出父级的正常浏览器滚动。

$('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 http://jsfiddle.net/38zR3/42/

Answer 2

您是否尝试过使用锚点而不是 tabindex？例如

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

根据我的经验，某些浏览器无法正确处理对 tabindex 的关注

Answer 3

我曾经遇到过这样的问题，并通过将overflow包含 div 的 CSS 样式设置为none或hidden取决于您的偏好来解决它。

Answer 4

添加一个.scrollTop()以确保它居中或您想要的样子。