Javascript arrow select + scrollbar

Question

My goal is to make a list where I can select items with UP and DOWN arrows. 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. Any idea?

Now, as you can see, if I use the DOWN arrow, it'll scroll down even the selection is not located at the bottom of the UL list and if I'm at the first element and press UP, the selection will start from the bottom of the list, but the scrollbar stay still and doesn't jump down.

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>

Answer 1

To prevent scrolling the page, you can use preventDefault, adding this code:

e.preventDefault();

And then, if you wish to scroll the page to selected element, you can use scrollIntoViewIfNeeded, putting the next code at the end of your listener:

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

But be careful with scrollIntoViewIfNeeded, it's not supported by Firefox. You can use any polyfill (like this one). Or just skip this step adding the availability check:

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