[css] scroll snap

Mdn

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

w3schools

https://www.w3schools.com/cssref/css_pr_scroll-snap-type.php

스크롤할때 컨텐츠를 적절하고 편안하게 볼 수 있도록 한다!
풀페이지로 구현할때 대부분 사용할 것 같은 본듯한 쫀득함임.

적용방법

1. 요소들을 담는다.

<div className="container">
  <div className="item" />
  <div className="item" />
  <div className="item" />
</div>

2. container에 scroll-snap-type을 준다.
   item에 scroll-snap-align을 준다.

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
.item {
  scroll-snap-align: start;
}

여러 타입들이있다.

1. container
   x,y는 축을 이야기하는 것임.
   both를 줘서 x, y축 모두에 설정할수도있음.

• mandatory
• proximity : 두 요소 사이에서는 스냅하지 않음.

2. item

• start
• center