scroll-snap이란?

CSS 단 두 줄로, 부드러운 스크롤의 carousel을 만들 수 있다!

• scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성이다.
• 이를 통해 스와이프 하거나, 스크롤 할 때 자연스러운 효과를 낼 수 있다.

scroll-snap-type

• 축과 엄격도를 선언해주는 속성
• 부모 컨테이너에 지정
• proximity : 기본값, 축에 따라서 자동으로 맞추어져 스냅
• madatory : 항상 스냅

.parent-container{
	scroll-snap-type: x mandatory; // x축으로 항상 스냅
	scroll-snap-type: y mandatory; // y축으로 항상 스냅
}

scroll-snap-align

• 스냅이 되었을 때 정렬해주는 속성
• 자식 요소에 지정
• 스크롤시 지정해준 속성의 위치로 곧바로 이동한다

.item {
	scroll-snap-align: start;
	scroll-snap-align: center;
	scroll-snap-align: end;
}

💡 flex: none

부모에서 display: flex 를 지정하고, 자식에서 flex: none 을 지정하지 않을 시,
부모 크기에 맞춰 자식 요소들이 수축될 수 있다.

💡 &::-webkit-scrollbar

이를 display:none 으로 설정할 시, 해당요소(&)의 스크롤바를 제거할 수 있다.

예시