scroll-snap-type / scroll-snap-align

scroll-snap-을 사용하면 사용자가 터치, 휠을 조작했을 때의 오프셋을 설정할 수 있음.

scroll-container는 scroll snap 동작이 발생하는 영역을 의미함.

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

DEMO - https://codepen.io/tutsplus/pen/qpJYaK

Scroll Snap Demo

 

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-type: x proximity; /* x축 스크롤, snap position 유무에 맞춰 스냅 엄격도를 지정하지 않을 경우, proximity로 설정됨 */

 

scroll-snap-align

snap area 안에서 원하는 정렬 방식을 설정

scroll-snap-type에서 지정한 축을 기준으로 snap area의 정렬을 정함

• none: snap position을 지정하지 않음
• start: 축을 기준으로 snap area의 시작 부분에 맞춰 정렬
• end: snap area의 끝에 맞춰 정렬
• center: snap area의 가운데에 맞춰 정렬

scroll-snap-align: center; /* snap area의 가운데 스냅 */

 

scroll-padding

scroll container에 선언하지만 해당 요소의 padding 값이 변경되는 것이 아니고 해당 뷰포트의 padding이 적용됨.

scroll container에 선언한 수치만큼 snapport가 조정되기 때문에 스크롤할 수 있는 영역이 줄어들고 레이아웃, 스크롤 원점, 요소의 위치, 실제로 보여지는 것에 영향을 주지 않음.

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

scroll-margin

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

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

 

** 주의사항

scroll-snap-type mandatory 값 선언 시 콘텐츠 간격이 넓을 때 강제로 스냅을 하게 되면 중간 콘텐츠를 건너 뛰고 다음 콘텐츠로 이동하는 경우가 발생하므로 주의할 것

scroll-snap 사용 시 신뢰할 수 없는 scroll-snap-type 속성이 아닌 확실한 속성으로 지원여부를 검증한 후 사용할 것.