scrollIntoView로 스크롤 제어

dev | 2022-04-30

스크롤을 제어하는 가장 쉬운 방법은 URL 해시를 이용한 링크 이동이 있고 여기에 좀 더 정교한 조작이 필요하다면 Window.scrollTo()를 사용하는 방법이 있다. Window.scrollTo()를 사용하면 세밀한 조작에 애니메이션까지 가능하지만 대상의 위치를 Element.getBoundingClientRect()와 같은 기능을 사용해서 일일이 계산해 줘야 한다.

element.scrollIntoView를 사용하면 번거로운 작업을 하지 않고도 페이지 내에서의 스크롤 이동을 쉽게 구현할 수 있다. 개발자 도구에서 HTML 검사기를 이용할 때 "화면에 보이게 스크롤" 기능을 사용해 본 적이 있다면 이해가 쉬울 것이다. 부드러운 스크롤 이동도 쉽게 옵션으로 지정할 수가 있다.

element.scrollIntoView({ behavior: "smooth" }});

이 외에도 스크롤 이동 위치를 상단을 기준으로 할지, 하단 또는 가운데를 기준으로 할지 등을 설정할 수 있어서 웬만한 경우의 스크롤 이동 기능은 아주 짧은 코드로 구현이 가능하다.

CSSOM View Module 스펙은 아직 초안인데 브라우저 지원 현황은 아주 양호해서 지금 바로 사용해도 괜찮을 듯 하다.

Comments

    Post a comment

    :

    : 공개 되지 않습니다. Gravatar를 표시 합니다.

    :

    : HTML 태그를 사용할 수 없습니다.