Bootstrap3 Typeahead键盘上下键操作后选中项消失问题求助

我之前在使用Bootstrap3 Typeahead时也碰到过完全一样的问题——一开始键盘上下键根本切不动选项，加了滚动代码后能切换了，但连续按个3、4次，选中项就从下拉菜单里“消失”了，实际上它还是处于选中状态，只是滚出可视区域了。咱们来搞定这个问题：

问题根源 #

你之前加的this.$menu.animate({scrollTop: prev.position().top }, 0);只处理了上一项的滚动位置，但没有考虑下拉菜单容器的高度和当前滚动偏移。当连续切换选项时，选中项的位置会超出菜单的可视范围，就出现了“消失”的假象。

修复方案 #

把原来的滚动代码替换成下面这段逻辑，它会自动判断当前选中项是否在可视区域内，然后调整菜单的滚动位置，确保选中项始终可见：

// 在上下键切换选中项的逻辑之后，添加这段滚动处理代码
var activeItem = this.$menu.find('.active');
if (activeItem.length) {
  var menuScrollTop = this.$menu.scrollTop();
  var itemRelativeTop = activeItem.position().top;
  var itemHeight = activeItem.outerHeight();
  var menuVisibleHeight = this.$menu.height();

  // 如果选中项在菜单可视区域上方，滚动到顶部对齐
  if (itemRelativeTop < 0) {
    this.$menu.scrollTop(menuScrollTop + itemRelativeTop);
  }
  // 如果选中项在菜单可视区域下方，滚动到底部对齐
  else if (itemRelativeTop + itemHeight > menuVisibleHeight) {
    this.$menu.scrollTop(menuScrollTop + (itemRelativeTop + itemHeight - menuVisibleHeight));
  }
}

为什么这样管用？ #

这段代码会：

• 找到当前处于选中状态的.active项
• 计算它相对于菜单容器的位置、自身高度，以及菜单的可视高度
• 根据位置判断是否需要滚动：如果项在可视区上方就往上滚，在下方就往下滚，刚好让它保持在可视范围内

注意事项 #

要确保这段代码是在每次上下键切换选中项之后执行的，比如在keydown事件处理选中项更新的逻辑后面，替换你原来的那行滚动代码就行。

内容的提问来源于stack exchange，提问作者Mahmoud Ahmed