我正在创建一个自定义自动推荐框,我需要在按下箭头的li
项目上移动。
所以我将tabindex属性添加到li中它正在获得焦点。但问题是它以一些随机高度向上滚动div,它从div中选择了li。
向下箭头键后
:
按下一些向下箭头键后:
之后,当鼠标向下移动时,它会离开屏幕。
我在这里制作了Demo JSFiddle
首先单击item1
,然后按向下箭头,表现相同。
答案 0 :(得分:16)
阐述我的评论
将容器的scrollTop
设置为index of focused li
* li height
。
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/
答案 1 :(得分:2)
您是否尝试使用锚而不是tabindex?例如
<li><a href="#"></li>
根据我的经验,某些浏览器无法正确处理对tabindex的关注
答案 2 :(得分:1)
我遇到过这样的问题并通过将包含div的CSS样式overflow
设置为none
或hidden
来解决问题,具体取决于您的偏好。
答案 3 :(得分:0)
添加.scrollTop()
以确保其居中或您希望如何居住。