[하루 한시간] Scroll Snap

신지웅·2023년 3월 21일

하루 한시간

목록 보기

4/7

CSS를 구현하여 스크롤되는 요소를 만들다보면, 인간의 눈은 정확하지 않기에 어떤 요소의 경계에 딱 맞게 스크롤하지 못하고 애매한 위치에서 스크롤이 끊기는 경우가 발생한다.

이러한 경우, 어떤 기준점을 넘어갔을때 알아서 그 요소의 처음이나 이전, 혹은 다음요소로 알아서 스크롤이 깔끔하게 되게끔 만들고 싶은 경우가 있는데, 이때 사용하는 CSS속성이 Scroll snap 되시겠다.

스크롤 액션을 마쳤을 때 지정한 오프셋 위치로 이동시킨다.

한가지 생각해줘야할 것은, flex요소처럼 스크롤되는 요소에 적용되는 것과 이를 감싸는 부모요소에 적용되는 것이 나눠져있다.

어떤 방향으로 스냅을 적용할 것인지를 지정한다.

대표적인 것이 X / Y 축 또는 두 축 모두에게 적용하는 방식이다.

얼마나 엄격하게 스냅을 적용할 것인지를 결정하는 속성인데, 무조건 스냅하게하는 mandatory가 있고, 지정된 오프셋이 있을때 이와 가까이 간 경우에만 스냅을 해주는 proximity가 있다.

이건 스크롤되는 요소에 지정해주는 속성인데, 스냅이 되었을때 요소를 어떻게 정렬시킬 것인지를 결정한다.

flex속성의 justift-content / align-items와 비슷하다고 생각하면 될 것 같다.

컨테이너의 시작점에 붙여주는 start, 중앙에 배치하는 center, 끝에 붙여주는 end가 있다.

이전에 만들었던 포트폴리오 웹사이트의 경우, 작은 화면의 경우에 스크롤을 해야하는 상황이 있는데, 이런 경우 애매한 위치에 스크롤이 멈추는 현상이 거슬렸었다.

Scroll Snap 속성을 활용하면 아주 간단하게 이런 현상을 해결할 수 있을 것 같다.

WORLDWIDEWEB