scroll-snap

scroll-snap

웹앱 등지에서 스크롤을 넘기다 보면 특정 컴포넌트에서 자석같이 멈추는 느낌의 스크롤을 볼 수 있다

위의 이미지에서도 중간즈음까지 스크롤을 넘기면 자동으로 컴포넌트의 왼쪽에 맞춰서 착 달라붙는 것을 볼 수 있다

임의로 자석 스크롤, 쫀쫀 스크롤이라고 부르고 있었는데 CSS에서의 정식 명칭은 scroll-snap이었다

(이하 위와 같은 동작을 ‘스냅’ 이라고 부르도록 하겠다)

이 모션을 위한 총 3개의 스크롤 관련 CSS 속성이 존재하는데, 하나는 부모 컨테이너에 적용하고, 두 개는 스크롤이 스냅되길 원하는 자식 박스에 적용하면 된다

세 개의 속성들

scroll-snap-type (부모)

scroll-snap-type: [ x | y | block | inline | both] [ mandatory | proximity ];

부모 컨테이너에 적용할 속성으로, 스크롤 스냅이 어떻게 적용될 지 정의한다

스크롤 스냅 방향과 방식을 값으로 지정할 수 있다

• 방향
  • x: 스크롤 스냅이 x축 방향 (좌-우) 에 걸린다
  • y: 스크롤 스냅이 y축 방향 (상-하) 에 걸린다
  • block: 스크롤 스냅이 블록 단위로 걸린다 (블록 자식 요소마다 스크롤 스냅)
  • inline: 스크롤 스냅이 인라인 단위로 걸린다 (인라인 자식 요소마다 스크롤 스냅)
  • both: x축, y축 모두에 스크롤 스냅이 걸린다
• 방식
  • mandatory: 스크롤 스냅 항상 적용, 스크롤 액션이 완료되면 반드시 스크롤 좌표가 스냅 포인트로 이동한다
  • proximity: mandatory와 비슷하지만 엄격하진 않다, 스냅 포인트 사이에 스냅이 일어나지 않는 영역이 있을 수도 있다

 

MDN에서의 scroll-snap-type 예제를 살펴보았을 때, x mandatory는 무조건 스냅이 일어나지만, x proximity는 어중간한 좌표로 스크롤하면 스냅이 발생하지 않는 것을 볼 수 있다

scroll-snap-align (자식)

scroll-snap-align: [ start | end | center ];

자식 박스에 적용할 속성으로, 요소에서 스냅이 걸릴 위치를 지정한다

 

• start: 요소의 시작 지점에 스냅 (왼쪽 → 오른쪽 방향 스크롤이라면 왼쪽 끝, 위 → 아래 방향 스크롤이라면 위쪽 끝)
• end: 요소의 끝 지점에 스냅 (왼쪽 → 오른쪽 방향 스크롤이라면 오른쪽 끝, 위 → 아래 방향 스크롤이라면 아래쪽 끝)
• center: 요소의 정중앙에 스냅

scroll-snap-stop (자식)

scroll-snap-stop: [ normal | always ];

스크롤 스냅을 항상 적용할 것인지, 아니면 스쳐지나가는 것이 가능하게 할 것인지 묻는 항목이다

이것은 움짤로 보는 것이 이해가 쉽다

 

• normal: 스냅 속성이 걸려있더라도 2번째 요소를 건너 뛰고 1번째 요소에서 3번째 요소로 바로 건너가는 등, 요소를 스쳐지나가는 것이 가능하다
• always: 이 속성이 걸려있는 요소는 지나치지 않고 반드시 스냅이 걸린다

스크롤을 빠르게 하면 always라도 스쳐지나가는 것처럼 보이긴 하지만 기본적으론 스냅을 걸어준다

구현하기

.container {
    height: 240px; // height 고정
    border: 1px solid black;
    padding: 20px;
    overflow: scroll; // 필수 속성
    scroll-snap-type: y mandatory; // 필수 속성
}

.child {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
    color: white;
    background-color: green; // 색상에 변화를 줘보자
    scroll-snap-align: start; // 필수 속성
    scroll-snap-stop: always;
}

• scroll-snap-type을 적용할 부모 컨테이너는 반드시 가로 길이 = width (x일 경우) 또는 세로 길이 = height (y일 경우) 가 고정되어 있어야 하며, overflow 속성이 있어야 한다
  • 이걸 모르고 길이가 자식 요소들의 컨텐츠 길이만큼 늘어나버린 부모 컨테이너에 걸었다가 스냅이 제대로 동작하지 않는 현상 발생..
  • 스냅이 제대로 걸려있지 않다면 overflow: scroll 이 제대로 동작하는지 확인하자
• 자식 요소에서 scroll-snap-stop은 필수가 아니다
  • 스킵이 필요하거나 반드시 스냅을 걸어주고 싶을 때, 필요에 따라 걸어주면 된다

 

쫀쫀~ 한 스냅 스크롤이 완성된다

무한스크롤에서 피드나 카드뷰를 보여줄 때 유용하게 사용된다

우리 프로젝트 같은 경우 구현사항에 카드 무한스크롤이 있어서 카드마다 스냅을 줄 때 활용하였다

---

참고 자료

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

https://www.w3schools.com/cssref/css_pr_scroll-snap-stop.php

https://www.w3schools.com/cssref/tryit.php?filename=trycss_scroll-snap-stop

https://stackoverflow.com/questions/53416348/css-scroll-snapping-vertical-not-working