Scroll Snap
스크롤을 멈췄을 때 미리 정해둔 위치에 콘텐츠를 자동으로 맞춰주는 CSS 기능
동작 구조
- 스크롤 컨테이너:
scroll-snap-type지정 - 스냅 대상 요소:
scroll-snap-align지정
속성
① scroll-snap-type
스크롤 스냅을 활성화하고, 방향과 강도 지정하는 속성
- 방향
- x : 가로 스크롤
- y : 세로 스크롤
- block : 블록 방향 (writing-mode 기준)
- inline : 인라인 방향
- both : 가로 + 세로
- 강도
- mandatory: 스크롤이 멈추면 반드시 스냅 지점으로 이동
- proximity: 스냅 지점 근처에 있을 때만 스냅
② scroll-snap-align
스냅 대상 요소가 어디에 맞춰질지 결정
- start: 요소의 시작 지점
- center: 요소의 중앙
- end: 요소의 끝
- none: 스냅 대상에서 제외
③ scroll-padding
스냅 기준 영역 자체에 여백 추가
④ scroll-margin
개별 스냅 대상 요소의 스냅 위치 조정
Section 1
Section 2
Section 3
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Scroll Snap Demo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="container">
<section class="panel panel-1">Section 1</section>
<section class="panel panel-2">Section 2</section>
<section class="panel panel-3 special">Section 3</section>
</main>
</body>
</html>body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
/* scroll-snap-type: block mandatory; */
}
.panel {
height: 100vh;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: bold;
color: white;
}
.panel-1 {
background: #2563eb;
}
.panel-2 {
background: #16a34a;
}
.panel-3 {
background: #dc2626;
}
.special {
scroll-padding-top: 120px;
}
'CSS' 카테고리의 다른 글
| [CSS] Flexbox로 레이아웃 잡기 (1) | 2022.12.27 |
|---|