帶有列表的窗口滾動

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(); 
    } 
});