javascript - JQuery 滚动列表框模仿与键盘导航？

Question

我的 javascript 列表框实现:

$(function() {
    $('#listbox1').on('keydown', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var $e = $(this).find('.selected');
        switch(e.which) {
            case 38:
                ($e.prev().length) && ($e = $e.removeClass('selected').prev().addClass('selected'));
                $(this).scrollTop( $e.position().top + $(this).scrollTop() );
            break;
            case 40:
                ($e.next().length) && ($e = $e.removeClass('selected').next().addClass('selected'));
                $(this).scrollTop( $e.position().top + $(this).scrollTop() );
            break;
        }
    });
});

这是一个 fiddle :http://jsfiddle.net/7qy8p2x1/ 。

这里展示了一个真实的列表框和他的模仿品。我不去，所以他们使用键盘导航箭头(向上和向下)滚动相同的内容。真正的列表框不会滚动，直到到达最后一个元素，但模仿会滚动(跟随每个元素)。 ScrollUp 工作正常。

请帮助我正确实现滚动行为。

Answer 1

我使用 .jspPane 来滚动列表，但是你可以在没有 jsp 的情况下使用它(如果你可以使用咖啡)可以向你显示 .coffee - 它更具可读性。如果您有疑问 - 我会帮助您

var keyboard_control, scroll_to_active;

keyboard_control = function() {
  $('.control-edu').on('keydown', 'input', function(e) {
    var $active, $first, $last, $this, i, temp;
    $this = $(this);
    $active = $('.jspPane span.active');
    $first = $('.jspPane span.opinion').first();
    $last = $('.jspPane span.opinion').last();
    if ($this.closest('.control-edu').find('.options span').length > 1) {
      if (e.keyCode === 38) {
        if ($active.length > 0) {
          if ($active.prev().length > 0) {
            temp = $active.prev();
            $active.removeClass('active');
            temp.addClass('active');
          } else {
            $active.removeClass('active');
            $last.addClass('active');
          }
        } else {
          $last.addClass('active');
        }
        i = $('.jspPane span.active').closest('.control-edu').index();
        scroll_to_active(i, 0);
      } else if (e.keyCode === 40) {
        if ($active.length > 0) {
          if ($active.next().length > 0) {
            temp = $active.next();
            $active.removeClass('active');
            temp.addClass('active');
          } else {
            $active.removeClass('active');
            $first.addClass('active');
          }
        } else {
          $first.addClass('active');
        }
        i = $('.jspPane span.active').closest('.control-edu').index();
        scroll_to_active(i, 1);
      } else if (e.keyCode === 13 && $active.length > 0) {
        $active.click();
      }
    }
  });
};

scroll_to_active = function(i, flag) {
  var $active;
  $active = $('.jspPane span.active');
  if (flag === 1) {
    if (($active.next().length > 0) && ($active.prev().length > 0)) {
      api[i - 1].scrollToElement($active.next());
    } else if ($active.prev().length === 0) {
      api[i - 1].scrollToElement($active);
    } else if ($active.next().length === 0) {
      api[i - 1].scrollToBottom();
    }
  } else if (flag === 0) {
    if ($active.next().length > 0) {
      api[i - 1].scrollToElement($active);
    } else {
      api[i - 1].scrollToBottom();
    }
  } else {
    return

  }
};

已编辑:删除 js2coffee 返回