Окно прокрутки со списком

Question

Я пытаюсь создать навигационный список в верхней части страницы. Итак, у меня есть <ul> с некоторыми <li> внутри. Мне не нужно показывать полный список, у меня может быть много из них. И мне нужно иметь возможность перемещаться внутри этого списка с клавиатуры. Я добавляю к атрибуту 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(); 
    } 
}); 

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