javascript - 在 ul li 中滚动行为异常

Question

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

所以，我尝试这样做，但滚动没有按预期工作。

这是我的链接

JS Fiddle

jsfiddle link

如果你想看这里的代码:

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

Answer 1

您忘记了在所有 if-else 语句中重新分配 selectedComboItem。否则你每次都滚动到错误的元素，并且在第一次更改时出错，因为在你的 else 语句中你从未初始化 selectedComboItem。

并且不要使用 $($result)，这会再次将您的 jQuery 对象转换为 jQuery 对象。

Working example.