当用户按下向上或向下箭头键时，我正在尝试实现自动滚动，应分别选择下一项或上一项。此外，如果所选项目不在可见区域，则应将其滚动到可见区域。

所以，我试过这样做，但滚动并没有像预期的那样起作用。

这是我的

JS Fiddle

jsfiddle链接

如果你想在这里看到代码：

HTML:

<div class="combobox">
  <input type="text" class="txtbox"/>
  <button class="txtbox-btn">GO</button>
</div>
<ul class="combobox-options">
  <li><span>AAA</span></li>
  <li><span>BBB</span></li>
  <li><span>CCC</span></li>
  <li><span>DDD</span></li>
  <li><span>AAA1</span></li>
  <li><span>AAA2</span></li>
  <li><span>AAA3</span></li>
  <li><span>BBB1</span></li>
  <li><span>BBB2</span></li>
  <li><span>BBB3</span></li>
  <li><span>CCC1</span></li>
  <li><span>CCC2</span></li>
  <li><span>CCC3</span></li>
</ul>

CSS：

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
ul{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
/*html, input, textarea, a{
  font-family: 'Montserrat';
}*/
input[type="text"].txtbox {
  color: #000000;
  height: 60px;
  width: 260px;
  font-size: 22px;
  /*border: none;*/
  padding-left: 21px;
}
.txtbox-btn {
  width: 60px;
  height: 60px;
  background: #1f7f5c;
  border: none;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  color: #fff;
}
.combobox {
  position: relative;
  width: 320px;
  height: 60px;
}
.combobox input[type="text"].txtbox,
.combobox .txtbox-btn{
  position: absolute;
}
.combobox .txtbox-btn{
  right: 0;
}
.combobox + .combobox-options{
  width: 320px;
  position: absolute;
  background: #1f7f5c;
  color: #fff;
}
.combobox + .combobox-options li {
  height: 50px;
  padding: : 12px;
  border-bottom: 1px solid #2a8664;
  display: table;
  width: 100%;
}
.combobox + .combobox-options li span {
  padding-left: 21px;
  font-size: 22px;
  display: table-cell;
  vertical-align: middle;
}
.selected {
  background: #0055ee;
}
.combobox-options{
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}

JQuery:

$('input').on('keydown', function(e){
    var $results = $('.combobox-options li span');
    if(e.keyCode == 40) { //down arrow
    if($($results).hasClass('selected')){
      var selectedComboItem = $($results).filter('.selected');
      if(selectedComboItem.parents('li').next().length == 1){
        $('.selected').removeClass('selected');
        selectedComboItem.parents('li').next().children('span').addClass('selected');
        scrollMe(selectedComboItem, $('.combobox-options'));
      } else {
        $('.selected').removeClass('selected');
      }
    }
    else {
      $results.first().addClass('selected');
      scrollMe(selectedComboItem, $('.combobox-options'));
    }
    e.preventDefault();
  }
  if(e.keyCode == 38) { //up arrow
    if($results.hasClass('selected')){
      var selectedComboItem = $($results).filter('.selected');
      if(selectedComboItem.parents('li').prev().length == 1){
        $('.selected').removeClass('selected');
        selectedComboItem.parents('li').prev().children('span').addClass('selected');
        scrollMe(selectedComboItem, $('.combobox-options'));
      } else {
        $('.selected').removeClass('selected');
      }
    }
    else {
      $results.last().addClass('selected');
      scrollMe(selectedComboItem, $('.combobox-options'));
    }
    e.preventDefault();
  }
});
function scrollMe(element, container){
  var offset = $(container).find('li').first().position().top;
  $(container).scrollTop($(element).position().top - offset);   
};