scroll-snap에서 scrollTo 사용하기

scroll-snap을 적용한 페이지를 제작 중이었다. scroll-snap을 적용하기 위해서는 컨테이너 하나와 그 컨테이너 내부에 스크롤할 요소들이 들어가 있어야 한다. 또한 컨테이너는 overflow 속성이 스크롤 가능하도록 되어있어야 한다.

scroll-snap의 적용은 크게 어려울 것이 없어서 수월하게 진행되었다. 다만 문제는 scrollTo를 이용한 스크롤의 제어가 작동하지 않는 것이었다. scrollTo를 이용해 다음 아이템으로 스냅하고 싶었는데 스크롤은 미동도 없었다. scroll-snap을 비활성화하면 scrollTo가 정상적으로 작동하는데 scroll-snap만 켜지면 작동하지 않았다.

원인은 스크롤의 대상이었다. 지금껏 window.scrollTo 로 브라우저 창의 스크롤을 열심히 제어하려고 시도했는데 생각해보면 브라우저의 높이는 100vh로 맞춘 상태여서 스크롤이 될리가 없었다.

snap 컨테이너가 overflow 되며 생긴 스크롤을 브라우저의 스크롤로 착각해서 벌어진 일이었다.

문제 해결을 위해 스크롤의 대상을 window가 아닌 snap 컨테이너로 지정하니 정상적으로 작동하기 시작했다.

document.querySelector(".container").scrollTo({ top: 0, behavior: "smooth" })