带有列表的窗口滚动

Question

我正尝试在页面顶部创建可导航列表。 所以我有<ul>里面有一些<li>。我不需要显示完整的列表，我可能会有很多。我需要有机会通过键盘浏览这个列表。 我添加到李的tabindex='0'属性。 问题是，在底部元素被聚焦后，窗口开始滚动列表。

HTML：

<ul> 
    <li tabIndex="0">item 1</li> 
    <li tabIndex="0">item 2</li> 
    <li tabIndex="0">item 3</li> 
    <li tabIndex="0">item 4</li> 
    <li tabIndex="0">item 5</li> 
    <li tabIndex="0">item 6</li> 
    <li tabIndex="0">item 7</li> 
    <li tabIndex="0">item 8</li> 
    <li tabIndex="0">item 9</li> 
    <li tabIndex="0">item 10</li> 
    <li tabIndex="0">item 11</li> 
    <li tabIndex="0">item 12</li> 
    <li tabIndex="0">item 13</li> 
    <li tabIndex="0">item 14</li> 
    <li tabIndex="0">item 15</li> 
    <li tabIndex="0">item 16</li> 
</ul> 

JS：

$('li').on('focus', function() { 
    $(this).addClass('focused'); 
}); 

$('li').on('focusout', function() { 
    $(this).removeClass('focused'); 
}); 

$('li').keydown(function (e) { 
    if (e.keyCode == 38) { 
     $(e.target).prev().focus(); 
    } 
    if (e.keyCode == 40) { 
     $(e.target).next().focus(); 
    } 
}); 

小提琴：https://jsfiddle.net/xne2p3mo/1/

Answer 1

将e.preventDefault();中的keydown回调，或者你也可以检查，当它应该防止违约，像滚动窗口。

$('li').keydown(function (e) { 
    if (e.keyCode == 38 || e.keyCode == 40) { 
     e.preventDefault(); 
    } 
    e.preventDefault(); 
    if (e.keyCode == 38) { 
     $(e.target).prev().focus(); 
    } 
    if (e.keyCode == 40) { 
     $(e.target).next().focus(); 
    } 
});