[ React ] 리스트의 focus된 옵션을 따라 스크롤 자동 이동

[ React ] SelectBox 컴포넌트 키보드 이벤트 추가 | onKeyDown

 

해당 컴포넌트에 이어서 작업한 내용

(필요해서 찾고 있었는데 정리를 안 해놨더군요)

 

 

 

요구사항

스크롤이 있는 옵션 리스트에서 키보드 이벤트를 통해 focus된 옵션을 이동 중일 때, 스크롤 아래쪽의 옵션이 focus되면 스크롤을 자동적으로 이동시키고 싶다.

 

 

 

 

구현

1. OptionListBox에 ref를 걸어준다.

<OptionListBox $isclose={isClose} ref={listRef}>

 

 

2. focusedIndex가 변화할 때 scrollIntoView를 통해 스크롤을 이동시킨다.

useEffect(() => {
  if (focusedIndex !== -1 && listRef.current) {
    const focusedElement = listRef.current.children[focusedIndex as number];
    if (focusedElement) {
      focusedElement.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
      });
    }
  }
}, [focusedIndex]);

현재 포커싱된 focusedElement가 화면 상에 보이도록 해주는 코드이다.

 

이때 스크롤이 자연스럽게 이동되도록 behavior: "smooth" 속성을 주었고, 

block: "nearest" 속성을 통해 스크롤 위치를 조정해주었다. 

 

 

 

 

결과