如何使用箭頭鍵導航對溢出列表進行自動滾動？

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>