使用键盘导航滚动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');
        }

      }
});

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');

演示：http://jsfiddle.net/CEXcY/3/