[240812 TIL] scrollIntoView 메서드

scrollIntoView

이 좋은 걸 몰랐다니..
요소를 뷰포트 내에 보이도록 자동 스크롤해주는 기능이라고 합니다..

 

아래 예시에서는 div 의 아래에 버튼들이 있고
인덱스를 state 로 관리하는 상황인데요.

 

인덱스가 변할 때 마다 useEffect 가 실행되고
자동으로 인덱스에 해당하는 버튼이 화면의 중앙에 오게 됩니다.

 

많이 써먹을 것 같습니다!

useEffect(() => {
    if (scrollRef.current) {
        const selectedButton = scrollRef.current.children[
                selectedIndex
            ] as HTMLElement;
        if (selectedButton) {
            selectedButton.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest',
                inline: 'center',
            });
        }
    }
}, [selectedIndex]);

참고: GPT 쌤의 설명

scrollIntoView 메서드는 JavaScript에서 DOM 요소를 뷰포트(Viewport) 내에서 보이도록 자동으로 스크롤하는 데 사용되는 메서드입니다. 이 메서드는 해당 요소가 현재 화면에 보이지 않는 경우, 화면에 나타나도록 스크롤 위치를 조정합니다. 이때 스크롤이 발생하는 방식은 여러 옵션으로 제어할 수 있습니다.

기본 문법

element.scrollIntoView([options]);

또는

element.scrollIntoView(alignToTop);

파라미터

scrollIntoView는 두 가지 방식으로 호출될 수 있습니다.

1. Boolean 방식 (Deprecated)
   • alignToTop: 선택적 Boolean 값입니다.
     • true: 요소가 화면의 상단에 위치하도록 스크롤합니다.
     • false: 요소가 화면의 하단에 위치하도록 스크롤합니다.
   • 이 방식은 현재 거의 사용되지 않으며, 옵션 객체를 사용하는 방식으로 대체되었습니다.
2. 옵션 객체 방식 (권장)
   • options: Object 형태로, 스크롤 동작을 더욱 세밀하게 제어할 수 있는 여러 속성을 포함합니다.

옵션 객체 속성

• behavior: 스크롤 애니메이션의 동작 방식을 정의합니다.
  • "auto": 기본 동작으로, 애니메이션 없이 즉시 스크롤합니다. (기본값)
  • "smooth": 부드러운 스크롤 애니메이션을 적용합니다.
• block: 요소가 수직 방향에서 어떻게 정렬될지를 정의합니다.
  • "start": 요소의 상단이 뷰포트의 상단에 맞춰집니다.
  • "center": 요소가 뷰포트의 중앙에 위치합니다.
  • "end": 요소의 하단이 뷰포트의 하단에 맞춰집니다.
  • "nearest": 현재 뷰포트와 가장 가까운 위치에 맞춰집니다.
• inline: 요소가 수평 방향에서 어떻게 정렬될지를 정의합니다.
  • "start": 요소의 좌측이 뷰포트의 좌측에 맞춰집니다.
  • "center": 요소가 뷰포트의 중앙에 위치합니다.
  • "end": 요소의 우측이 뷰포트의 우측에 맞춰집니다.
  • "nearest": 현재 뷰포트와 가장 가까운 위치에 맞춰집니다.

예제

1. 기본 사용법 (Deprecated 방식):
2. // 요소를 뷰포트의 상단에 위치시키며, 부드러운 스크롤 없이 즉시 이동 element.scrollIntoView(true);
3. 권장 사용법 (옵션 객체 사용):이 예제에서는 요소가 부드럽게 스크롤되며, 화면의 중앙에 위치하게 됩니다.
4. element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });

실생활 예시

• 네비게이션 메뉴: 긴 목록에서 특정 항목이 선택되었을 때, 해당 항목이 화면에 보이도록 스크롤됩니다.
• 이미지 갤러리: 썸네일 목록에서 특정 이미지가 선택될 때, 선택된 이미지가 뷰포트 중앙에 오도록 스크롤됩니다.
• 폼 검증: 사용자가 잘못된 입력을 했을 때, 에러 메시지나 해당 폼 필드로 자동 스크롤됩니다.

scrollIntoView는 이런 인터랙션을 구현하는 데 매우 유용하며, 사용자 경험을 크게 향상시킬 수 있는 기능입니다.