[CSS] Scroll-Snap

Scroll-Snap이란? 

웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅 되도록 하는 CSS 속성

즉, 임의 위치에서 멈추지 않고, 개발자가 정의한 포인트에서 자동으로 멈추게 하는 기술

 

나는 이 내용을 배달의 민족 홈페이지보고 매력을 느꼇다. 내가 생각하는 대표적인 예인 것 같다.

배달의 민족(https://www.baemin.com/)

배달의민족 - 무료배달 배민클럽

 

---

Scroll-Snap은 필수적으로 부모 요소와 자식 요소로 정의된다.

 

 1) 부모 요소 - 스냅 종류 설정

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

• Scroll-snap-type 옵션
  • x : 가로로 스냅
  • y : 세로로 스냅
  • both : 가로+세로로 스냅
  • mandatory : 반드시 스냅
  • proximity : 가까울 때 스냅

 

 

2) 자식 요소 - 고정 위치 설정

.section {
  scroll-snap-align: start;
  height: 100vh;
}

• scroll-snap-aligh 옵션
  • start : 요소 시작 부분을 기준으로 스냅
  • center : 요소 중앙에서 스냅
  • end : 요소 끝에서 스냅

---

마진과 패딩, 그 외

1) scroll-padding : 스냅 위치 안쪽 여백

2) scroll-margin : 스냅 위치 바깥 여백

3) scroll-snap-stop : 빠르게 넘겨도 멈추기(엄청 빠르게 넘겨도 반드시 중간 섹션을 건너뛰지 않고 무조건 스냅 됨)

4) scroll-behavior : 부드러운 스크롤

 

---

x 축으로 스냅

See the Pen Untitled by 김도혁 (@mnzipjlg-the-bold) on CodePen.