How to scroll when navigating a ul with keyboard javascript?

Question

I implemented a function to navigate through a list and scroll when I hit the last item visible in the list, this is my code so far:

const arrowNavigation = (
    e: React.KeyboardEvent<HTMLInputElement>
  ) => {
    if (selectedCountry.current) console.log(selectedCountry.current.last());
    if (e.key === 'ArrowDown') {
      if (selectedCountryIndex < autoCompleteSuggestions.length - 1)
        setSelectedCountryIndex(selectedCountryIndex + 1);
      if (selectedCountryIndex > 3)
        if (selectedCountry.current && dataList.current) {
          console.log(selectedCountry.current.offsetHeight);
          dataList.current.scrollTop +=
            selectedCountry.current.offsetHeight;
        }
    } else if (e.key === 'ArrowUp') {
      if (selectedCountryIndex - 1 >= 0)
        setSelectedCountryIndex(selectedCountryIndex - 1);
      if (selectedCountryIndex > 3)
        if (selectedCountry.current && dataList.current) {
          dataList.current.scrollTop -=
            selectedCountry.current.offsetHeight;
        }
    } else if (e.key === 'Enter') {
      if (textInput.current)
        textInput.current.value =
          autoCompleteSuggestions[selectedCountryIndex];
      setInputValue(autoCompleteSuggestions[selectedCountryIndex]);
    }
  };

This is the view currently:

To explain the code:

dataList is the ul.

selectedCountry is the li element that I am currently on.

selectedCountryIndex is the index of element that I am currently on.

autoCompleteSuggestions is a list of country suggestions based on the input I've given.

So my approach was to wait till selectedCountryIndex is at a certain point to start scrolling but this is really just a hardcoded solution if my list view has more visible items it wouldn't really work, is there a way to know how many visible items the ul has? or maybe know the position of the visible items in the ul (like first last and so on..).

Also, as you can see in the gif when I scroll down it works perfectly, but when I scroll up, I start seeing the next element little by little, I am not sure why that's happening, so if you have any idea about that as well let me know.

Alfred Ayi-bonte · Accepted Answer · 2023-02-06 21:07:11Z

1

 const ul = document.getElementById('dataList');
  let li = ul.getElementsByTagName('li')[mIndex + 1];
  li?.scrollIntoView({
    behavior: 'smooth',
    block: 'end',
  }); // my pseudocode using element ids

answered Feb 6, 2023 at 21:07

Alfred Ayi-bonte

7757 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mirou Over a year ago

Thanks for the answer, I'll try it and let you know!

Collectives™ on Stack Overflow

How to scroll when navigating a ul with keyboard javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related