scroll-snap

 

scroll-snap-type

scroll-snap-type 속성은 스크롤 영역에서 스냅 포인트가 얼마나 정확하게 적용될지를 설정합니다.

스냅 포인트를 적용하는 데 사용되는 정확한 애니메이션 또는 물리 기능은 브라우저에 따라 다릅니다.

 

/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* … */

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;

 

속성값

 

none

스크롤 영역이 스크롤되면 스냅 지점을 무시합니다.

 

x

스크롤 영역에서 수평 방향으로 이동하며 스냅합니다.

 

y

스크롤 영역에서 수직 방향으로 이동하며 스냅합니다.

 

block

스크롤 영역에서 블록 축 방향으로 이동하며 스냅합니다.

 

inline

스크롤 영역에서 인라인 축 방향으로 이동하며 스냅합니다.

 

both

스크롤 영역의 모든 축에서 이동하며 스냅합니다.

 

mandatory

스크롤이 완료되어 다음 스크롤 영역이 보여지면 다음 스크롤 영역으로 이동하는 스냅 액션이 실행됩니다.

 

proximity

스크롤이 완료되었을때 현재 영역보다 다음 스크롤 영역이 더 좁게 보여진다면 스냅이 액션이 실행되지 않고, 다음 영역이 더 많이 화면에 보여지면 스냅액션이 실행됩니다.

 

See the Pen scroll-snap-type by SM (@SM-the-decoder) on CodePen.

 

 

 

 

scroll-snap-align

scroll-snap-align 속성은 스크롤 영역내의 스냅 정렬을 지정합니다. 두 값은 각각 블록 축과 인라인 축에서 스냅 정렬을 지정합니다. 하나의 값만 지정하는 경우, 두 번째 값은 기본적으로 블록, 인라인 동일한 값으로 설정됩니다.

 

/* Keyword values */
scroll-snap-align: none;
scroll-snap-align: start end; /* when two values set first is block, second inline */
scroll-snap-align: center;

/* Global values */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

 

속성 값

 

none

이 축에서 상자는 스냅 위치를 정의하지 않습니다.

 

start

스크롤 컨테이너의 스냅포트 내에서 이 상자의 스크롤 스냅 영역의 정렬은 시작 부분.

 

end

스크롤 컨테이너의 스냅포트 내에서 이 상자의 스크롤 스냅 영역의 끝 정렬은 이 축에서 스냅 위치입니다.

 

center

스크롤 컨테이너의 스냅포트 내에서 이 박스의 스크롤 스냅 영역의 중앙 정렬은 이 축에서의 스냅 위치입니다.

 

 

scroll-snap-stop

스크롤 영역에서 멈춰야 할 위치를 지정할 수 있는 기능입니다. 스크롤을 통해 각각의 컨테이너를 일반 스크롤처럼 통과해 지나갈지, 아니면 컨테이너마다 멈추게 할지 설정할 수 있습니다.(터치 환경)

 

 

/* Keyword values */
scroll-snap-stop: normal;
scroll-snap-stop: always;

/* Global values */
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;

 

속성 값

 

normal

스크롤 영역이 스크롤되면 가능한 스냅 위치를 넘어 스크롤 됩니다.

 

always

스크롤 영역의 스냅 위치를 넘어가서는 안되며, 다음 스냅 위치에서 정지해야합니다.

 

 

See the Pen Untitled by SM (@SM-the-decoder) on CodePen.

 

 

 

만약 scroll-snap-stop 속성이 always로 설정된 요소에서는 스크롤을 빠르게 터치 스크롤 하더라도 스냅 지점에서 스크롤이 자동으로 중지됩니다. 그러나 scroll-snap-stop 속성이 normal로 설정된 요소에서는 스냅 지점이 빠르게 터치 스크롤하면 다음 요소에서 스냅되어 정지하지 않고 스크롤이 계속 진행됩니다.

필요한 경우, 스크롤 컨테이너 내에서 중지되는 항목을 선택적으로 지정할 수 있습니다. 위 예시에서는 홀수와 짝수 항목을 대상으로 지정되어 있습니다.