![[CSS] 틀에 맞추는 스크롤 스냅 만들기 - Scroll Snap](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYv1HY%2FbtrWdfNWUa2%2FrxKKUBTCOPkwiCIPtq3k9K%2Fimg.png)
위의 애니메이션처럼 스크롤 하면 틀에 맞게 스크롤 되는 것을 스크롤 스냅 (Scroll Snap) 이라고 합니다.
이 스크롤 스냅도 자바스크립트 없이 오직 CSS로 만들 수 있습니다.
코드
.scroll-box.horizon {
flex-direction: row;
overflow: auto hidden;
scroll-snap-type: x mandatory;
}
.scroll-box.vertical {
flex-direction: column;
overflow: hidden auto;
scroll-snap-type: y mandatory;
}
.item {
scroll-snap-align: start;
min-width: 100%;
}위의 코드중 .scroll-box가 부모 element이며 .item이 자식 element입니다.
핵심
- 부모 element는 'scroll-snap-type' 속성을 가지고 있어야 함.
scroll-snap-type은 어느 방향으로 스냅을 줄지, 어떤 타입으로 스냅을 표현할 지를 결정합니다.
위의 코드에서 mandatory 값을 넣었는데, 이는 스크롤이 끝날 때 가까이 있는 스냅 지점까지 보정해줍니다.
- 자식 element는 'scroll-snap-align' 속성을 가지고 있어야 함.
scroll-snap-align은 스냅 위치를 정해줍니다.
대표적으로 start, end, center 가 있습니다.
- start는 해당 요소의 부모 컨테이너의 가장 왼쪽 (시작지점)을 스냅 축으로 정합니다.
- end는 해당 요소의 부모 컨테이너의 가장 오른쪽 (끝지점)을 스냅 축으로 정합니다.
- center 는 해당 요소의 부모 컨테이너의 중앙을 스냅 축으로 정합니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
scroll-snap-type - CSS: Cascading Style Sheets | MDN
The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align
scroll-snap-align - CSS: Cascading Style Sheets | MDN
The scroll-snap-align property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snapport (as the alignment container). The two values specify the snapping alignment in the block axis
developer.mozilla.org
'개발 아카이브 > HTML, CSS' 카테고리의 다른 글
| rel 속성 - noopener, noreferrer, nofollow (0) | 2023.05.21 |
|---|---|
| [CSS] 문장 맨 앞 글자 크게 만들기 - Drop Cap 만들기 (0) | 2023.01.13 |
| [CSS] 흑백 효과 만들기 - GrayScale (0) | 2023.01.12 |
| [CSS] 잘라낸 텍스트 만들기 / Cut out Text (0) | 2023.01.10 |
| [CSS] background에 fade color 넣기 (0) | 2023.01.10 |