스크롤 스냅 타입

scroll-snap-type 속성

기존에 Java Script을 활용해야 사용했던 Scroll-Sanp을 CSS를 활용해서 사용할 수 있게 되었다.

​웹 페이지에서 화면을 한번만 스크롤해도 scroll-snap를 설정해 놓은 페이지화면으로 넘어갈 수 있게 된다.

 

scrollslide.zip

0.12MB

scroll-snap-type.zip

0.00MB

 

 

 

scroll-snap-type

snap position을 지정할 수 있는 축을 결정하는 Scroll Snap Axis, 스냅의 엄격도를 지정하는 Scroll Snap Strictness 를 함께 선언합니다.

scroll snap axis

x: 수평(가로) 축으로 snap position 지정

y: 수직(세로) 축으로 snap position 지정

block: snap area의 block 축으로 지정

inline: inline 축으로 지정

both: 두 축의 위치를 개별적으로 스냅. 잠재적으로 각 축의 다른 요소에 스냅이 가능.

scroll snap strictness

none: 스냅하지 않음.

proximity: snap position을 지정하였다면 해당 설정에 맞춰 스냅하고, 미지정 상태라면 유저 에이전트에 따릅니다.

mandatory: 항상 스냅.

​

scroll-snap-align

snap position은 snap area 안에서 원하는 정렬 방식을 설정할 수 있습니다.

scroll-snap-type에서 지정한 축을 기준으로 snap area의 정렬을 정합니다.

none: snap position을 지정하지 않음

start: 축을 기준으로 snap area의 시작 부분에 맞춰 정렬

end: snap area의 끝에 맞춰 정렬

center: snap area의 가운데에 맞춰 정렬

​

scroll-padding

Scroll Container에 선언하지만, 해당 요소의 padding 값이 변경되는 것이 아니고, 해당 뷰포트의 padding이 적용됩니다.

Scroll Contatiner에 선언한 수치만큼 snapport가 조정되기 때문에 스크롤 할 수 있는 영역이 줄어들고

레이아웃, 스크롤 원점, 요소의 위치, 실제로 보여지는 것에는 영향을 주지 않습니다.

다음의 CSS를 적용해봤습니다.

scroll-snap-type:y mandatory; scroll-padding: 50px;

scroll-margin

스냅 타겟이 되는 snap area에 지정하며, scroll-padding과 동일하게 실제 요소에 영향을 미치지 않습니다.

다음의 CSS 적용했습니다. 두번째 상자에만 적용

.snap-area:nth-of-type(2) { scroll-margin: 100px; }