时间戳

首页 > 解决方案 > Javascript箭头选择+滚动条

javascript - Javascript箭头选择+滚动条

问题描述

我的目标是制作一个列表，我可以在其中选择带有向上和向下箭头的项目。I found this code, but didn't figure out how to make it scroll when the selection is at the bottom or top of the UL list. 任何想法？

现在，如您所见，如果我使用向下箭头，即使选择不在 UL 列表的底部，它也会向下滚动，如果我在第一个元素并按向上，选择将从列表的底部，但滚动条保持静止并且不会向下跳。

var li = $('#torso li');
        var liSelected;
        $(window).keydown(function(e) {
            if(e.which === 40) {
                if(liSelected) {
                    liSelected.removeClass('selected');
                    next = liSelected.next();
                    if(next.length > 0) {
                        liSelected = next.addClass('selected');
                    } 
                    else {
                        liSelected = li.eq(0).addClass('selected');
                    }
                } 
                else {
                    liSelected = li.eq(0).addClass('selected');
                }
            } 
            else if(e.which === 38) {
                if(liSelected) {
                    liSelected.removeClass('selected');
                    next = liSelected.prev();
                    if(next.length > 0) {
                        liSelected = next.addClass('selected');
                    }

                    else {
                        liSelected = li.last().addClass('selected');
                    }
                } 
                else {
                    liSelected = li.last().addClass('selected');
                }
            }
        });
li.selected {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="torso">
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
</ul>

标签： javascripthtmlcss

解决方案

为了防止滚动页面，您可以使用preventDefault，添加以下代码：

e.preventDefault();

然后，如果您希望将页面滚动到选定元素，可以使用scrollIntoViewIfNeeded，将下一个代码放在侦听器的末尾：

if (liSelected) {
  liSelected.get(0).scrollIntoViewIfNeeded()
}

但请注意， Firefox 不支持scrollIntoViewIfNeeded它。你可以使用任何 polyfill（比如这个）。或者只是跳过此步骤添加可用性检查：

if (liSelected && Element.prototype.scrollIntoViewIfNeeded) {...}

推荐阅读