如何使用箭头键导航对溢出列表进行自动滚动？

Question

我对列表进行了箭头导航，但问题是我的列表滚动了，并且所选项目最终超出了容器的限制。如果我的容器的滚动与所选项目一起下降，那将是完美的。有人可以提示我如何解决这个问题吗？

 $(function() {
   $(document).on('keydown', function(e) {
     switch (e.which) {
       case 40:
         e.preventDefault();
         $('li:not(:last-child).selected').removeClass('selected')
           .next()
           .addClass('selected');
         break;
       case 38:
         e.preventDefault();
         $('li:not(:first-child).selected').removeClass('selected')
           .prev()
           .addClass('selected');
     }

   })

 })

ul {
  padding: 0;
  list-style: none;
  max-height: 100px;
  overflow: scroll;
}

li.selected {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected">item #1</li>
  <li>item #2</li>
  <li>item #3</li>
  <li>item #4</li>
  <li>item #5</li>
  <li>item #6</li>
  <li>item #7</li>
  <li>item #8</li>
  <li>item #9</li>
  <li>item #10</li>
  <li>item #11</li>
</ul>

Answer 1

javac

 $(function() {
   $(document).on('keydown', function(e) {
     switch (e.which) {
       case 40:
         e.preventDefault();
         $('li:not(:last-child).selected').removeClass('selected')
           .next()
           .addClass('selected');
         break;
       case 38:
         e.preventDefault();
         $('li:not(:first-child).selected').removeClass('selected')
           .prev()
           .addClass('selected');
     }

      //scroll to element:
$("ul").scrollTop(0);//set to top
$("ul").scrollTop($('li.selected').offset().top - $('li.selected').height());

   })

 })

ul {
  padding: 0;
  list-style: none;
  max-height: 100px;
  overflow: scroll;
}

li.selected {
  background-color: orange;
}

您可以尝试上面的代码段。要将滚动条设置到选定的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="selected">item #1</li> <li>item #2</li> <li>item #3</li> <li>item #4</li> <li>item #5</li> <li>item #6</li> <li>item #7</li> <li>item #8</li> <li>item #9</li> <li>item #10</li> <li>item #11</li> </ul>元素。

Answer 2

您还可以将tabindex添加到所有列表项。将焦点放在所选元素上。那应该可以解决您的问题。

$(function() {
   $('li').attr('tabindex', 0);

   $(document).on('keydown', function(e) {
     switch (e.which) {
       case 40:
         e.preventDefault();
         $('li:not(:last-child).selected').removeClass('selected')
           .next()
           .addClass('selected')
           .focus();
         break;
       case 38:
         e.preventDefault();
         $('li:not(:first-child).selected').removeClass('selected')
           .prev()
           .addClass('selected')
           .focus();
     }

   })

 })

ul {
  padding: 0;
  list-style: none;
  max-height: 100px;
  overflow: scroll;
}

li.selected {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected">item #1</li>
  <li>item #2</li>
  <li>item #3</li>
  <li>item #4</li>
  <li>item #5</li>
  <li>item #6</li>
  <li>item #7</li>
  <li>item #8</li>
  <li>item #9</li>
  <li>item #10</li>
  <li>item #11</li>
</ul>