sanguk.dev
작성완료
CSS 스크롤에 스냅 걸기

CSS 스크롤에 스냅 걸기

CSS의 스냅 기능을 사용하여 스크롤 위치를 제어하는 방법을 설명하며, 예제 HTML과 CSS 코드를 제공한다. div 요소는 100vh 높이를 가지며, 스크롤 스냅 타입을 설정하고, 각 section 요소는 스냅 정렬을 시작 위치로 설정한다.

CSS & SASS & SCSS

스냅 위치로 이동 및 스크롤 동작을 제어하는 기능이 포함된 CSS 내장 모듈이다.

html
<div>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
  <section>6</section>
</div>
css
div {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}
section {
  height: 100vh;
  scroll-snap-align: start;
}