CSS scroll-snap 속성 정리

 

 

자바스크립트 없이 scroll 이벤트와 같은 효과를 나타내는 scoll-snap css

 

 

 

예제.html

<div class="scroll-snap-box"> <!-- 부모 요소 -->
  <div class="scroll-snap-item"></div> <!-- 자식 요소 -->
  <div class="scroll-snap-item"></div>
  <div class="scroll-snap-item"></div>
  <div class="scroll-snap-item"></div>
</div>

 

 

 

 

scroll-snap-type

- 부모 요소에 적용

- 축 설정과 스크롤 넘어가는 스타일 지정

- mandatory = 스크롤을 조금만 내려도 다음 자식요소로 넘어감.

- proximity = 스크롤을 조금씩 넘겨도 그대로 유지되지만, 스크롤이 다음 요소에 근접하면 다음 자식요소로 넘어감.

- both = 가로 세로 축 모두

/* 부모 요소에 적용 */
.scroll-snap-box { 
  scroll-snap-type: y mandatory; /* [축] [넘어가는방식] */
  scroll-snap-type: y proximity;
  scroll-snap-type: x mandatory;
  scroll-snap-type: x proximity;
  scroll-snap-type: both mandatory;
  scroll-snap-type: both proximity;
}

 

 

 

scroll-snap-align

- 자식 요소에 적용

- 스크롤 될때 부모 기준에 자식 요소를 어디에 맞출지

- none, start, end, center

/* 자식 요소 */
.scroll-snap-item {
  scroll-snap-align: none;
  scroll-snap-align: start;
  scroll-snap-align: end;
  scroll-snap-align: center;
}

 

 

 

See the Pen scroll-snap css example by 오희주 (@heeju02) on CodePen.

 

 

scroll 관련된 속성 참고 문서 (mdn scroll-*)

scroll-padding, scroll-margin 등 다양한 속성이 있다.