[JavaScript] scrollIntoView()에 대해 알아보자

오늘은  scrollIntoView()에 대해 알아보겠습니다.

 

가끔 웹페이지를 보다 보면 화면 바깥으로 빠져나가있어 스크롤해야만 볼 수 있는 메뉴 탭이 있습니다. 살짝 화면을 빠져나간 메뉴를 클릭하면 메뉴 탭은 빠져나간 그 자리 그대로 있고, 내용만 바뀌게 됩니다. 

 

하지만, 메뉴를 누르게 되면 자연스러운 애니메이션과 함께 스크롤되는 동작을 보이는 웹페이지도 있습니다. 

 

 

 

[ scrollIntoView() ]

 

scrollIntoView() 메서드는 특정 요소가 화면에 보이도록 스크롤을 이동시키는 메서드입니다. 이 메서드는 요소의 상위 컨테이너를 스크롤하는 것이 아니라, 요소 자체를 스크롤합니다.

 

이 메서드를 호출하면 해당 요소가 현재 뷰포트에 보이도록 스크롤됩니다. scrollIntoView() 메서드는 인수를 사용하지 않을 때, 뷰포트 상단에 해당 요소를 위치시킵니다.

 

하지만 scrollIntoView() 메서드는 alignToTop과 같은 옵션을 사용하여 스크롤할 때 요소가 뷰포트의 어느 위치에 위치할지 정할 수 있습니다. 

 

옵션으로 사용 가능한 매개변수는 아래와 같습니다. 

 

• alignToTop: 요소를 뷰포트 상단에 위치시킵니다. 기본값입니다.
• alignToCenter: 요소를 뷰포트 중앙에 위치시킵니다.
• alignToBottom: 요소를 뷰포트 하단에 위치시킵니다.
• behavior: 스크롤 동작을 설정합니다. auto(기본값)는 자연스러운 스크롤 동작을 사용하고, smooth는 부드러운 스크롤 동작을 사용합니다.
• block: 요소가 뷰포트에 맞춰질 때, 요소의 어느 부분을 뷰포트 상단이나 하단에 위치시킬지 설정합니다. start(기본값)은 요소의 상단 부분을 뷰포트 상단에 위치시키고, center는 요소의 중앙 부분을 뷰포트의 중앙에 위치시키고, end는 요소의 하단 부분을 뷰포트 하단에 위치시킵니다.

scrollIntoView() 메서드는 대부분의 모던 브라우저에서 지원되며, 요소가 가려져 있다면 스크롤되어 보이게 할 때 사용할 수 있습니다.