CSS scroll-snap-type 속성

정의와 사용법

scroll-snap-type 데이터 속성은 사용자가 스크롤을 멈추면 요소가 얼마나 어떻게 점집중에 결합되고 결합 방향이 되는지 정의합니다.

스크롤 기어 행동을 구현하려면, 부모 요소에 설정해야 합니다. scroll-snap-type 속성을 부모 요소에 설정하고, 자식 요소에 설정합니다 scroll-snap-align 속성.

x축에서 스크롤 기어 기능을 설정합니다:

#container {
  scroll-snap-type: x mandatory;
}

x축과 y축에서 모두 설정합니다. scroll-snap-type 속성:

#container > div {
  scroll-snap-type: both mandatory;
}

x축과 y축에서 접근성이 있는 스크롤 기어 효과를 설정합니다. scroll-snap-type 속성을 사용할 때, 스크롤 작업이 두 요소의 중간 위치에 정확히 멈추면 기어 효과가 발생하지 않습니다:

#container > div {
  scroll-snap-type: both proximity;
}

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

값	설명
none	스크롤 기어 효과가 없습니다. 기본 값.
x	x축에서 스크롤 기어 효과를 설정합니다.
y	y축에서 스크롤 기어 효과를 설정합니다.
block	블록 방향에서 스크롤 기어 효과를 설정합니다.
inline	행 내 방향에서 스크롤 기어 효과를 설정합니다.
both	x축과 y축에서 모두 스크롤 기어 효과를 설정합니다.
mandatory	스크롤 작업이 완료되면, 스크롤은 자동으로 기어점으로 이동합니다.
proximity	mandatory와 유사하지만, 그보다 더 엄격하지 않습니다. 스크롤 작업이 완료되면, 스크롤은 자동으로 기어점으로 이동하지만, 기어점 사이에는 기어 효과가 없는 영역이 있습니다. 브라우저 매개변수에 따릅니다.
initial	이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit	이 속성을 부모 요소에서 상속합니다. 참조: inherit。

기본 값:	none
상속성:	아니요
애니메이션 제작:	지원하지 않습니다. 참조:애니메이션 관련 속성。
버전:	CSS3
JavaScript 문법:	object.style.scrollSnapType="x mandatory"

표格에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

크롬	에지	파이어폭스	사파리	오페라
69.0	79.0	99.0	11.0	56.0