scrollIntoView 사용법

1. 서론

무한 스크롤, scrollBox 등 스크롤 방식을 사용할 때 특정 위치로 이동하기 위한 기능들이 있습니다. 대표적인 사용법이 맨 위로 이동하는 버튼, 다음 요소로 이동하는 버튼 등 특정 요소나 위치로 이동하는 버튼들이 있는데 이 버튼을 구현하는 쉬운 방법으로 scrollIntoView 메서드가 있습니다.

2. 본론

scrollIntoView() 메서드의 사용법은 아래와 같습니다.

const target = document.getElementById('target');
target?.scrollIntoView({
      inline: 'nearest', // 가로 'start' | 'end' | 'nearest' | 'center'
      block: 'nearest', // 세로 'start' | 'end' | 'nearest' | 'center'
      behavior: 'smooth', // 애니메이션 유무. smooth: O / instant: X / auto: 자동
})

target이라는 id를 가진 요소를 찾아 해당 요소를 뷰포트에서 보이도록 스크롤을 할 수 있습니다.

inline은 가로, block은 세로로 스크롤을 할 수 있으며 start, center, end, nearest옵션을 가지고 있습니다.

inline

• start: 요소의 시작
• end: 요소의 끝
• center: 요소의 중간
• nearest: 가까운 곳 정렬

block

• start: 요소의 위
• end: 요소의 아래
• center: 요소의 중간
• nearest: 가까운 곳 정렬

또한 behavior 옵션을 통해 애니메이션 유무를 선택할 수 있습니다.

3. 결론

가볍게 정리하는 마음으로 scrollIntoView 메서드를 정리해보았습니다. 실무에서 무한스크롤, 캐러셀 UI를 사용할 일이 많다고 생각하는데 손쉽게 원하는 위치로 이동할 수 있는 메서드이기에 너무 유용하게 사용하고 있습니다. 오늘도 글 읽어주셔서 감사합니다.

4. 참조

React/VanillaJS UI 요소 직접 만들기 Part 1 - 정재남님