scrollIntoView로 스크롤 제어
dev | 2022-04-30
스크롤을 제어하는 가장 쉬운 방법은 URL 해시를 이용한 링크 이동이 있고 여기에 좀 더 정교한 조작이 필요하다면 Window.scrollTo()
를 사용하는 방법이 있다. Window.scrollTo()
를 사용하면 세밀한 조작에 애니메이션까지 가능하지만 대상의 위치를 Element.getBoundingClientRect()
와 같은 기능을 사용해서 일일이 계산해 줘야 한다.
element.scrollIntoView
를 사용하면 번거로운 작업을 하지 않고도 페이지 내에서의 스크롤 이동을 쉽게 구현할 수 있다. 개발자 도구에서 HTML 검사기를 이용할 때 "화면에 보이게 스크롤" 기능을 사용해 본 적이 있다면 이해가 쉬울 것이다. 부드러운 스크롤 이동도 쉽게 옵션으로 지정할 수가 있다.
element.scrollIntoView({ behavior: "smooth" }});
이 외에도 스크롤 이동 위치를 상단을 기준으로 할지, 하단 또는 가운데를 기준으로 할지 등을 설정할 수 있어서 웬만한 경우의 스크롤 이동 기능은 아주 짧은 코드로 구현이 가능하다.
CSSOM View Module 스펙은 아직 초안인데 브라우저 지원 현황은 아주 양호해서 지금 바로 사용해도 괜찮을 듯 하다.
Comments