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

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

  $(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> 

您可以尝试上面的代码段。 将滚动条设置到选定的li元素。

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>