Stop scrolling window element on keypress

I got a custom dropdown element and enabled scrolling on keypress, using tabindex="-1" on the elements combined with focusing them:


const arrowNavigation = (evt) => { 

Problem occurs when the keypress-scroll hits the top/bottom border. Then pressing the keys scrolls the window. The standard behavior is stopped by using @keydown.prevent. But this also stops the “smooth” scroll behavior using tabindex (It keeps scrolling but just jumps to the list items). Is there a different way preventing the standard window scroll behavior?

Here’s the repo for anyone interested
The important method is arrowNavigation.

Well, I fixed it switching from using the basic brwoser behavior to scrolling by myself using scrollto:

try {
    var x = scrollBox.getBoundingClientRect().x;
    var y = (document.getElementsByClassName(`elem-${searchFocus.value}`)[0].getBoundingClientRect().height * searchResults.indexOf(searchFocus.value));

scrollBox.scrollTo(x, y);

In combination with:

@keydown.prevent="arrowaNavigation($event)" tabindex="0"

For preventing the basic scroll behavior and still getting the focus for arrow-navigation on the custom element.