使用键盘导航滚动UL元素时，出现奇怪的跳跃行为

Question

我有一个 UL 列表，当按下箭头键时，我通过添加一个 .active 类来更改 LI 元素的选择。这很有效，但现在我需要在移动超出可见范围时使 UL 滚动。我有以下代码，我还在一个工作的 jsfiddle 中包含了复制我的问题。任何帮助都将不胜感激。

$(document.documentElement).keyup(function (e) {
      var $generatorListItems = $('#genSelectFilter>li');
      var code = e.keyCode || e.which;
      var $element = $('#genSelectFilter>li.active');
      var listLength = $generatorListItems.length;
      var index = $element.index();
      var childIdx = 0;

      if (code == 40) {
        // arrow down
        if (index < listLength) {
          $generatorListItems.removeClass('active');
          childIdx = index + 2;
          $('#genSelectFilter').find('>li:nth-child(' + childIdx + ')').addClass('active');
          $('#genSelectFilter').animate({
            scrollTop: $('#genSelectFilter>li:nth-child(' + childIdx + ')').position().top
          }, 'slow');
        }

      } else if (code == 38) {
        // arrow up
        if (index > 0) {
          $generatorListItems.removeClass('active');
          $('#genSelectFilter').find('>li:nth-child(' + index + ')').addClass('active');
          $('#genSelectFilter').animate({
            scrollTop: $('#genSelectFilter>li:nth-child(' + index + ')').position().top
          }, 'slow');
        }

      }
});

- Gregg

Answer 1

我稍微修改了你的代码：

我稍微修改了你的代码：

if (code == 40) {
    // arrow down
    if (index < listLength) {
        $element = $element.removeClass('active').next().addClass('active');
        $('#genSelectFilter').animate({
            scrollTop: $element.position().top + $("#genSelectFilter").scrollTop()
        }, 'slow');
    }
    e.preventDefault();
} 
else if (code == 38) {
    // arrow up
    if (index > 0) {
        $element = $element.removeClass('active').prev().addClass('active');
        $('#genSelectFilter').animate({
            scrollTop: $element.position().top + $("#genSelectFilter").scrollTop()
        }, 'slow');
    }
    e.preventDefault();
}

因此，您应该使用keydown事件，并在上/下按钮的情况下防止默认行为以防止浏览器默认滚动。我还更改了动画部分。更改活动类也可以更简单：

$element.removeClass('active').next().addClass('active');

Demo: http://jsfiddle.net/CEXcY/3/

- dfsq

---

@dfsq 你救了我的一天 :) 我做了一些小调整，但是它们没有影响到它的表现 :) - Guillermo