[CSS] 마우스 스크롤 시 자동으로 스냅(snap)되게 하기 (scroll-snap-type & scroll-snap-align)

 

 

간혹 웹사이트들을 구경하다보면, 마우스 스크롤 시 자연스럽게 - 마치 다음 페이지로 넘어가는 것처럼 - 다음 페이지의 맨 윗부분이 y = 0 인 부분으로 스냅(snap)되는 것을 볼 수 있다. 뭔가 대단한 기술이 들어간 것인가?!라고 생각했지만, 아주 간단한 CSS로 구현 가능하다는 것을 알게 되었다. 바로 scroll-snap-type과 scroll-snap-align이다. 

 

 

 

 

 

 

 

동작되는 모습

마우스 스크롤을 하면, 원하는 다음 화면을 가득히 똑! 떨어지게 보여준다.

 

 

// How-To

1단계: 페이지 엘리먼트들을 만든다.

영상의 예시같은 경우 리액트로 만든 것이여서, Home이라는 컴포넌트 안에 className이 home-sections인 <section>을 여러개 반복해서 만들어주었다. 이 <section> 하나가 width와 height이 각각 100vw, 100vh에 해당하는 한 페이지 또는 장면이 된다.

 

 

2단계: CSS

<section>의 부모와 <section> 본인들에게 각각 걸어주어야 하는 것들이 있다.

 

/* 부모 App */
.App {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

/* 자식 section들 */
.home-sections {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
}

/* 홀수번째 자식 */
.home-sections:nth-child(odd) {
  background-color:cadetblue;
}

/* 짝수번째 자식 */
.home-sections:nth-child(even) {
  background-color:lightcoral;
}

 

 

부모 앨리먼트엔 scroll-snap-type: y mandatory와 overflow-y: scroll 설정을 해준다.

scroll-snap-type 프로퍼티는 스크롤 했을 때 얼마나 깐깐하게 스냅을 시켜주는지를 설정하는 요소이다. (=> MDN) 위 코드에 설정된 값은 y mandatory이며, 이는 y방향(아래위)으로 스크롤시 필수로 깔끔한 스냅이 되도록 하는 옵션이다. mandatory 외에 proximity로도 설정할 수 있는데, proximity로 할 경우 각 <section> 테그들을 기준으로 정확하게 화면 분할이 되지 않는다.

 

overflow-y는 블럭레벨 앨리먼트의 위나 아래로 담고 있는 컨텐츠가 넘쳤을 경우 (=overflow했을 경우) 어떻게 할 것인지 설정해주는 프로퍼티이다. (=> MDN)  visible, hidden, scroll 등의 값을 설정할 수 있다.

 

 

 

자식 앨리먼트엔 scroll-snap-align 프로퍼티를 추가한다.

scroll-snap-align 프로퍼트는 박스의 스냅 포지션을 스냅 컨테이너의 스냅 포트 내 지역에 정렬시킨다. 값 두 개를 적을 수 있는데, 첫번째 값은 block축의 스냅핑 정렬을, 두번째 값은 inline축의 스냅핑 정렬을 특정한다. 만약 값이 하나만 주어진다면, 주어진 값 하나가 디폴트로 두 축 모두에게 적용된다. (=>MDN) 추가 가능한 값으론 none, start, end 등이 있다.