스크롤

속성	설명	옵션
scroll-snap-type	스냅 동작을 설정 (부모 컨테이너)	none, x mandatory, y proximity
scroll-snap-align	개별 요소가 스냅되는 위치 설정	none, start, center, end
scroll-snap-stop	스크롤 중간에 멈출지 여부 설정	normal, always
overflow	스크롤 가능하도록 설정	auto, scroll, hidden
scroll-margin	스크롤 스냅 시 요소의 바깥 여백을 설정 개별 요소
scroll-padding	스크롤 컨테이너의 내부 여백을 설정 스크롤 컨테이너

스크롤 스냅

스크롤 스냅(Scroll Snap)은 사용자가 스크롤할 때 특정 위치에서 멈추도록 설정하는 기능이야.

갤러리, 슬라이더, 페이지 섹션 등에서 부드럽고 정렬된 스크롤 효과를 제공!

scroll-snap-type

스크롤 스냅이 적용될 축(X, Y)을 지정하고 동작 방식을 설정. 부모 컨테이너에서 설정해야 함

none : 기본값 (스냅 기능 없음)
x mandatory : 가로(X축) 스크롤 + 강제 스냅
y mandatory : 세로(Y축) 스크롤 + 강제 스냅
x proximity : 가로(X축) 스크롤 + 부드러운 스냅
y proximity : 세로(Y축) 스크롤 + 부드러운 스냅

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 300px;
} /* 세로 스크롤 시 강제 스냅 적용! */

scroll-snap-align

각 아이템이 스냅될 위치 지정. 자식 요소에서 설정해야 함

none : 스냅 없음
start : 스크롤 시작점에서 정렬
center : 스크롤 중앙에서 정렬
end : 스크롤 끝에서 정렬

.item {
  scroll-snap-align: center;
} /* 스크롤할 때 각 요소가 중앙에서 멈춤! */

scroll-snap-stop

스크롤이 한 번에 여러 개의 아이템을 넘기지 않도록 설정

normal : 기본값 (일반적인 스크롤)
always : 항상 한 번에 하나씩만 스냅됨

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}
.item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
} /* 항상 한 번에 한 개의 아이템만 스크롤되도록 설정! */

스크롤 스냅 실전 예제

가로 방향 스크롤 갤러리

갤러리를 스크롤할 때 각 아이템이 중앙에서 멈춤!

.gallery {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 10px;
}
.item {
  flex: 0 0 300px;
  scroll-snap-align: center;
}

세로 스크롤 섹션

한 섹션씩 부드럽게 스크롤되도록 설정!

.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y proximity;
}
.section {
  height: 100vh;
  scroll-snap-align: start;
}

스크롤 위치 조정

scroll-margin

스크롤 시 요소가 닿는 위치를 조정 (스크롤이 요소를 가리지 않도록 조정 가능)

개별 요소 (scroll-snap-align과 함께 사용)

.section {
  scroll-margin-top: 100px;
}
/* 스크롤 이동 시 100px 여유 공간을 확보하여 요소가 화면 맨 위에 붙지 않도록 조정! */

<a href="#section1">Go to Section 1</a>
<div id="section1" class="section">Section 1</div>

scroll-padding

스크롤 컨테이너 내부 여백을 설정하여, 콘텐츠가 더 보기 좋게 배치되도록 조정

스크롤 컨테이너 (scroll-snap-type과 함께 사용)

.container {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 50px;
  overflow-y: scroll;
  height: 100vh;
} /* 스크롤할 때, 맨 위 요소가 50px 떨어진 위치에서 정렬됨! */

3.5 KiB Raw Blame History

스크롤