고정 헤더 영역
상세 컨텐츠
본문
반응형
- 인스타그램처럼 페이지를 이동을 하면 스크롤이 해당 페이지의 첫 페이지의 위쪽 포인트만큼 이동이 되는 걸 본 적이 있을 겁니다.
- 이 기능을 사용하기 위해서는 fullpage.js 오픈 소스를 이용을 하는데, 상업용으로 이용할 경우엔 비용이 생깁니다.
Javascript로 처리를 했었던 스냅 처리를 CSS로 할 수 있게 속성이 추가가 됐습니다.
그 속성은 scroll-snap-type 속성입니다.
scroll-snap-type
- MDN에 따르면 scroll-snap-type 속성은'scroll-snap-type CSS 속성은 스냅 포인트가 있는 경우 스크롤 컨테이너에 스냅 포인트가 얼마나 엄격하게 적용되는지 설정합니다.' 라고 설명되어 있습니다.
- 스크롤은 좌우 축인 x축, 위아래 축인 y축 기준으로 스크롤을 부드럽게 이동이 됩니다.
속성
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;
- none : 스크롤 컨테이너가 스크롤 될 때 스냅 포인트가 적용되지 않음
- x : 스크롤 컨테이너가 수평 축의 스냅 위치에만 스냅됨
- y : 스크롤 컨테이너가 수직 축의 스냅 위치에만 스냅됨
- block : 스크롤 컨테이너는 블록 축의 스냅 위치에만 스냅됨
- inline : 스크롤 컨테이너는 인라인 축의 스냅 위치에만 스냅됨
- both : 스크롤 컨테이너는 두 축의 스냅 위치에 독립적으로 스냅됨
- mandatory : 항상 스냅.
- proximity : snap position을 지정하였다면 해당 설정에 맞춰 스냅하고, 미지정 상태라면 유저 에이전트에 따릅니다.항상 스냅.
mandatory 속성 이용 예제
<html>
<head>
<meta chartset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100vh;
overflow: hidden;
}
.parent {
overflow: scroll;
height: 100vh;
scroll-snap-type: y mandatory;
}
.part {
height: 100vh;
scroll-snap-align: start;
position: relative;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: grey;
}
.four {
background-color: green;
}
</style>
<head>
<body>
<div class="parent row">
<div class="part one">
</div>
<div class="part tow">
</div>
<div class="part three">
</div>
<div class="part four">
</div>
</div>
</body>
</html>See the Pen by rarri01 (@rarri01) on CodePen.
scroll-snap-align
- snap position은 scroll-snap-type에서 지정한 축을 기준으로 원하는 정렬 방식을 설정할 수 있습니다.
- scroll-snap-align 속성 사용 가능한 브라우저 버전
속성
- none : snap position을 지정하지 않음
- start : 축을 기준으로 snap 영역의 시작 부분에 맞춰 정렬
- end : snap 영역의 끝에 맞춰 정렬
- center : snap 영역의 가운데에 맞춰 정렬
반응형
'IT > 응용' 카테고리의 다른 글
| [Flutter] 버전 2.0.4 build Failed 발생 (0) | 2021.09.15 |
|---|---|
| [Flutter] Flavor를 통한 빌드 변형하기 (0) | 2021.09.08 |
| [Flutter] VlcPlayer 플러그인 상태 값 (0) | 2021.07.14 |
| [Flutter] VlcPlayer 무한 영상 재생 (0) | 2021.07.13 |
| [Flutter] 탭 메뉴(Tab Menu) 만들기 (0) | 2021.06.24 |
댓글 영역