JavaScript箭头选择器 + 滚动条

Question

我的目标是创建一个列表，可以用上下箭头选择项目。我找到了这段代码，但不知道如何让它在 UL 列表底部或顶部时自动滚动。有什么想法吗？

现在，你可以看到，即使选择项不位于 UL 列表底部，如果我使用下箭头，它也会向下滚动；如果我在第一个元素处按 UP，选择项将从列表底部开始，但滚动条保持静止，不会向下跳动。

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>

- Nagy Szabolcs

Answer 1

为了防止页面滚动，您可以使用 preventDefault 代码。

e.preventDefault();

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

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

但是要小心使用scrollIntoViewIfNeeded，因为它不被Firefox支持。您可以使用任何polyfill（比如这个）。或者只需添加可用性检查跳过此步骤：

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

- Ramil Garipov

Answer 2

可能不是您想要的东西，但请注意纯HTML代码中的<select>有一个属性multiple可以直接使用。当然，这可以使用CSS样式进行美化。

滚动元素可以使用上/下箭头。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

<select multiple>
    <option value="dog" selected>Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

- NVRM