CSS scroll-snap-align 속성
- 이전 페이지 scroll-padding-top
- 다음 페이지 스크롤-스나ップ-스톱
정의와 사용법
scroll-snap-align 속성은 사용자가 스크롤을 멈추면 요소가 초점 위치에 고정되도록 지정합니다
스크롤-스냅 행동을 구현하려면 반드시 자식 요소에 속성을 설정해야 합니다 scroll-snap-align 속성을 설정하고 부모 요소에 적용합니다 스크롤-스냅-타입 속성。
예제
예제 1
사용자가 스크롤을 멈추면 가장 가까운 요소를 중앙 위치에 기준 위치를 설정합니다：
div {
scroll-snap-align: center;
}
예제 2: 이미지 라이브러리
scroll-snap-align 이 속성은 이미지 라이브러리를 스크롤하여 볼 때非常适合 사용됩니다. 여기서 스크롤 방향은 수평이고, 기준 위치 정렬 방식은 중앙입니다. 사용자가 스크롤 바를 떼면 가장 가까운 이미지가 스크롤 가능区域의 중앙에 기준 위치를 설정합니다. 한 장의 이미지를 클릭한 후 왼쪽과 오른쪽 방향키를 사용하여 이미지를 뒤로 이동하여 볼 수 있습니다:
#container > img {
scroll-snap-align: none center;
}
예제 3: 블록 방향에 대한 수직 정렬 기준 위치
수직 스크롤할 때scroll-snap-align 속성은 블록 방향에도 요소의 시작 위치로 설정될 수 있습니다：
#container > div {
scroll-snap-align: start none;
}
CSS 문법
scroll-snap-align: none|start|end|center|block inline|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| none | 스크롤 기준 위치 효과가 없습니다. 기본 값. |
| start | x축과 y축에서 요소 시작에 대해 스크롤 기준 위치를 설정합니다. |
| end | x축과 y축에서 요소 끝에 대해 스크롤 기준 위치를 설정합니다. |
| center | x축과 y축에서 요소 중심에 대해 스크롤 기준 위치를 설정합니다. |
| block inline | 이중 값 문법. 첫 번째 값은 블록 방향에 대한 기준 위치를 지정하고, 두 번째 값은 줄 방향에 대한 기준 위치를 지정합니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참조: initial。 |
| inherit | 이 속성을 부모 요소에서 상속합니다. 참조: inherit。 |
기술 세부 사항
| 기본 값： | none |
|---|---|
| 상속성： | 아니요 |
| 애니메이션 제작： | 지원하지 않습니다. 참조:애니메이션 관련 속성。 |
| 버전： | CSS3 |
| JavaScript 문법： | object.style.scrollSnapAlign="start" |
브라우저 지원
표에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |
관련 페이지
- 이전 페이지 scroll-padding-top
- 다음 페이지 스크롤-스나ップ-스톱
