按下向下箭头按下列表项

Question

我创建一个自定义的自动提示框，我需要继续前进li项上箭头向下按。

所以我将tabindex属性添加到li它正在获得焦点。 但问题是它以一些随机高度向上滚动div，它从div中选择了li。

向下箭头键后：

按下一些向下箭头键后：

之后它会离开屏幕，而鼠标按下则表现完美。

在这里我做了一个Demo JSFiddle首先点击item1然后按向下箭头它表现相同。

Answer 1

阐述我的评论

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

在keydown时return 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 http://jsfiddle.net/38zR3/42/

Answer 2

你尝试过使用锚而不是tabindex吗？ 例如

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

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

Answer 3

我有一个这样的问题，并通过将包含div的CSS样式overflow设置为none或hidden来解决它，具体取决于您的偏好。

Answer 4

添加.scrollTop()以确保它居中或按您希望的方式放置。