javascript - 带列表的窗口滚动

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