CSS scorll-snap 개념 정리

scroll-snap 은 사용자가 스크롤 조작을 마쳤을 때의 상태를 설정할 수 있다. 

스크롤을 하다보면 컨텐츠 간의 중간에 멈추거나 일부만 보이기도 하는데, 미리 설정한 위치로 이동 할 수 있게끔

CSS 로 조작 할 수 있게 해준다. 

(javascript 의 사용을 줄이고, 하드웨어 가속을 사용하기 때문에 브라우저에서 원활한 동작과 성능을 기대할 수 있다.)

(* 하드웨어 가속이란? => 컴퓨터에서 일부 기능을 CPU 에서 구동하는 소프트웨어 방식보다 더 빠르게 수행 할 수 있는 하드웨어를 말한다. (in google))

 

scroll-snap 에는 4가지 속성이 있다. 

• scroll-snap-type: axis, strictness 

axis : 축을 지정( x축, y축, block, inline, both )

strictness : 스냅의 엄격도를 지정 ( none, proximity(default값), mandatory )

 

• scroll-snap-align

snap area 안에서 원하는 정렬 방식을 설정할 수 있다. scroll-snap-type 에서 지정한 축을 기준으로 snap-area를 정렬함.

none : snap position 을 지정하지 않음.

start : snap area 의 시작지점으로 맞춤

end : snap area 의 끝에 맞춤

center : snap area 의 가운데 맞춤

 

• scroll-padding

scroll-area 를 감싸는 부모 요소에 선언한다. 해당 요소에 padding 값이 들어가는게 아니고,

해당 뷰포트의 padding 값이 적용된다. 선언한 수치(padding 값) 만큼 수치가 줄어들기 때문에

스크롤 할 수 있는 영역이 줄어드나, 레이아웃, 스크롤 원점, 요소의 위치, 실제로 보여지는 것에는 영향을 주지 않음.

 

• scroll-margin 

scroll-padding 이랑 같은 맥락. 둘의 공통점은 사용자에게 다음 컨텐츠를 예상할 수 있게 해준다. 

 

,

,

,

 

참고링크

1. https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%B5%9C%EC%8B%A0-CSS-%EA%B8%B0%EB%8A%A5-%F0%9F%8E%A8-CSS-Scroll-snap

[CSS] 📚 스크롤을 부드럽게 🎨 Scroll Snap

2. https://wit.nts-corp.com/2018/08/28/5317