Question

我正在尝试启用用户使用向上/向下箭头浏览列表。我无法自动控制滚动条。也就是说，了解当用户到达最后一个可见元素时移动滚动条的时间和程度。

这个问题很可能是重复的，但是花了一些时间后，万思才能找到类似物。

＆＃13;

$(document).on('keydown', function(e) {
  if (e.which === 40) {
    e.preventDefault();
    var $selected = $('.selected');
    if ($selected.next().length !== 0) {
      $('li').removeClass('selected');
      $selected.next().addClass('selected');
    }
  }

  if (e.which === 38) {
    e.preventDefault();
    var $selected = $('.selected');
    if ($selected.prev().length !== 0) {
      $('li').removeClass('selected');
      $selected.prev().addClass('selected');
    }
  }
});

＆＃13;

li {
  height: 100px;
  border: solid;
}

li.selected {
  background: red;
}

ul {
  overflow-y: auto;
  width: 150px;
  height: 300px;
  list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>A</li>
  <li>B</li>
  <li class='selected'>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
</ul>

＆＃13;

Answer 1

不是控制滚动条本身，而是将其视为设置列表的滚动位置，以便所选项目在视图中。

您可以阅读offsetTop属性（或JQuery中的offset().top）以查找所选项目的顶部偏移量，然后稍微调整以使其居中。

这不完美，但它接近你想要的东西：

https://jsfiddle.net/mhg0mzs3/2/

在向上/向下箭头添加侦听器时以编程方式控制滚动条

1 个答案: