[CSS] 틀에 맞추는 스크롤 스냅 만들기 - Scroll Snap

스크롤 스냅

위의 애니메이션처럼 스크롤 하면 틀에 맞게 스크롤 되는 것을 스크롤 스냅 (Scroll Snap) 이라고 합니다.

이 스크롤 스냅도 자바스크립트 없이 오직 CSS로 만들 수 있습니다.

 

코드

.scroll-box.horizon {
    flex-direction: row;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
}

.scroll-box.vertical {
    flex-direction: column;
    overflow: hidden auto;
    scroll-snap-type: y mandatory; 
}

.item {
    scroll-snap-align: start;
    min-width: 100%;
}

위의 코드중 .scroll-box가 부모 element이며 .item이 자식 element입니다.

 

핵심

- 부모 element는 'scroll-snap-type' 속성을 가지고 있어야 함.

scroll-snap-type은 어느 방향으로 스냅을 줄지, 어떤 타입으로 스냅을 표현할 지를 결정합니다.

위의 코드에서 mandatory 값을 넣었는데, 이는 스크롤이 끝날 때 가까이 있는 스냅 지점까지 보정해줍니다.

 

- 자식 element는 'scroll-snap-align' 속성을 가지고 있어야 함.

scroll-snap-align은 스냅 위치를 정해줍니다.

대표적으로 start, end, center 가 있습니다.

- start는 해당 요소의 부모 컨테이너의 가장 왼쪽 (시작지점)을 스냅 축으로 정합니다.

- end는 해당 요소의 부모 컨테이너의 가장 오른쪽 (끝지점)을 스냅 축으로 정합니다.

- center 는 해당 요소의 부모 컨테이너의 중앙을 스냅 축으로 정합니다.

 

 

 

See the Pen Untitled by wooncloud (@wooncloud) on CodePen.

 

 

 

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

scroll-snap-type - CSS: Cascading Style Sheets | MDN

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

scroll-snap-align - CSS: Cascading Style Sheets | MDN