按下向下箭头按下列表项
我正在创建一个自定义的自动建议框,我需要按下箭头按下的项目。
所以我添加了tabindex属性给li它正在获得焦点。 但问题是它以一些随机高度向上滚动div,它从div中选择了li。
向下箭头键后:
按下一些向下箭头键后:
之后它会离开屏幕,而鼠标按下则表现完美。
在这里我做了一个Demo JSFiddle首先单击item1
然后按向下箭头它表现相同。
阐述我的评论
将容器的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/
我有一个像这样的问题并通过将包含div的CSS样式overflow
设置为none
或hidden
来解决它,具体取决于您的偏好。
添加.scrollTop()
以确保它居中或按您希望的方式放置。