[CSS] 스크롤로 페이지 넘기기(스크롤 스냅)

코드

HTML

<div class="scroll-container">
  <div class="scroll-area">1</div>
  <div class="scroll-area">2</div>
  <div class="scroll-area">3</div>
  <div class="scroll-area">4</div>
</div>

CSS

.scroll-container {
  height: 100vh;  /* 부모 컨테이너가 화면 전체의 높이를 차지하도록 설정 */
  overflow: auto; /* 스크롤이 가능하도록 설정 (세로 방향 스크롤) */
  scroll-snap-type: y mandatory;  /* 세로 방향(y축)으로 스냅 효과를 강제 적용 (페이지처럼 넘기기) */
}

.scroll-area {
  scroll-snap-align: start;  /* 각 스크롤 섹션이 스냅될 때 시작 지점에서 정렬되도록 설정 */
}

 

참고문서

🎨 스크롤을 부드럽게 - Scroll Snap 속성