프론트엔드
Scroll Snap API를 통해 이미지 캐러셀 완성하기
두줄요약
Scroll Snap API로 이미지 캐러셀의 스크롤 종료 위치를 제어하는 방법을 설명했습니다. JavaScript 없이 축, 스냅 강도, 정렬 기준을 조합해 슬라이드 UX를 구현합니다.
구조와 흐름
- 수평 flex 컨테이너와
overflow-x: auto기반 이미지 슬라이드 배치 - 스크롤 컨테이너의
scroll-snap-type과 자식 슬라이드의scroll-snap-align조합 start·center·end정렬 지점에 맞춘 스크롤 종료 위치 보정
선택 이유
- 터치 스와이프·마우스 휠의 부정확한 종료 위치 보정
- JavaScript 없이 캐러셀의 제어된 스크롤 경험 제공
주의할 점
- 수평 스냅은
overflow-x, 수직 스냅은overflow-y기반 설정 필요 mandatory는 항상 스냅,proximity는 근접 시에만 스냅
적용해볼 점
- 이미지 캐러셀 외 페이지 스크롤·드롭다운 등 스크롤 컨테이너 UI 적용
- 슬라이드 크기와 스냅 정렬 기준을 UX에 맞춰 조합
