CSS Scroll Snap(스크롤스냅)으로 이미지 slider 만들기

scroll snap이란 사용자가 터치하거나 스크롤 시 조작을 마쳤을 때 화면에서 다음 화면으로 전환될 때  자석처럼 특정 위치에 탁 붙는 기능입니다.  보통 swiper를 이용하여 슬라이더를 만들었는데, swiper를 사용하는 대신 scroll snap을 이용하여  슬라이더 기능을  간단하게 만들 수도 있습니다. 또는 fullPage js와 같은 기능을 sroll snap을 사용하여 구현할 수도 있습니다. 

 

css scroll snap에 대한 브라우저 지원은 대부분 지원을 합니다.

css scroll snap 브라우저 지원

 

scroll snap 의 기본 사용법

스크롤 스냅은 컨테이너 요소에 scroll-snap-type 속성을 설정하고 그 안에 있는 요소에 scroll-snap-align 속성을 설정하여 사용합니다.

가장 기본적인 형태는 다음과 같습니다.

<!-- html code -->
<div class="container">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
  <p>...</p>
</div>

/* css */
.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

 

scroll-snap-type 속성

scroll-snap-type 속성은 다음과 같습니다. 보통 mandatory와 proximity를 많이 사용합니다

 

 none  : 기본 속성이며 스크롤 스냅 효과가 없음.

 x  : x 축에 대한 스크롤 스냅 효과가 설정.

 y  : y 축에 대한 스크롤 스냅 효과가 설정.

 block  : 블록 방향으로 스크롤 스냅 효과가 설정.

 inline  : 인라인 방향으로 스크롤 스냅 효과가 설정.

 both  : x축 y축 모든 방향으로 스크롤 스냅 효과가 설정

 mandatory  : 스크롤이 끝날 때 쯤 스크롤이 자동으로 스냅 지점으로 이동.

 proximity  : mandatory와 유사하지만 강제성을 띠지 않음. 스크롤 동작이 끝나면 자동으로 스냅 지점으로 지동으로 이동하지만 스냅지점과 스냅지점 사이에는 효과가 없음.

 initial  : 기본값으로 설정.

 inherit  : 상위요소의 속성을 상속받음.

 

 

하단 샘플은 mandatory와 proximity의 예시입니다. 스크롤을 해보면 차이점을 알수 있을 것입니다.

mandatory의 경우 스크롤이 끝날 때 해당 컨텐츠의 내용 끝부분이 보여지자 마자 다음 스냅 지점으로 이동합니다.

proximity의 경우는 스크롤하는 동안 컨텐츠가 긴 경우 중간 부분에는 스냅효과가 없습니다. 컨텐츠의 마지막 내용부분이 스냅영역 상단 부분에 다다를 때 스냅효과가 생깁니다.

한 화면에 다 보여줄 경우에는 mandatory속성을 이용하고, 내용이 길어 기본 브라우저 높이보다 보여주고자 하는 컨텐츠의 높이값이 길다면 proximity 속성을 이용하는 것이 좋아 보입니다.

See the Pen scroll-snap : y mandatory sample by woosohee (@venusy) on CodePen.

 

 

 

 

 

scroll-snap-type 속성

scroll-snap-align 속성은 스크롤을 멈출 때 속성에 따라 위치를 지정됩니다.

start속성은 시작 부분이며 end속성은 끝부분, center는 중앙 부분에 스냅이 위치합니다.

 

 none  : 기본 속성이며 스크롤 스냅 효과가 없음.

 start  : x축 y축 요소의 시작 부분에서 스냅스크롤 함.

 end  : x축 y축 요소의 끝 부분에서 스냅스크롤 함.

 center  : x축 y축 요소의 중앙 부분에서 스냅스크롤 함.

 blcok inline  :첫 번째 값은 수직 방향으로 스냅하는 방법이고, 두번째 방법은 수평 방향으로 스냅하는 방법 임.

 initial  : 기본값으로 설정.

 inherit  : 상위요소의 속성을 상속받음.

 

아래의 예시처럼 갤러리용 스크롤 방향은 가로로 하여 스냅 정렬을 중앙으로 하면 슬라이더를 구현할 때 js 없이 css만으로 사용가능합니다.

다양하게 scroll snap을 응용할 수 있습니다. 

See the Pen Untitled by woosohee (@venusy) on CodePen.

 

 

 

aspect-ratio사용법에 대한 내용은 다음을 참고해주세요~

 

css 이미지 비율(종횡비) 고정하는 방법 aspect-ratio 사용