스크롤할때 해당 영역에 딱 붙어부리는 효과를 css로만 구현이 가능하다.
부모영역에 scroll-snap-type 속성을, 자식영역에 scroll-snap-align, scroll-snap-stop 속성을 부여하면 된다.
scroll-snap-stype: [ mandatory | proximity ]
– proximity : 설정에 맞춰 스냅, 미지정이라면 브라우가 알아서 함
– mandatory : 항상 스냅
scroll-snap-align: [ none | start | end | center ]
– none: 스냅 기준점을 지정하지 않음
– start: 시작 부분에 맞춰 정렬
– end: 끝 부분에 맞춰 정렬
– center: 가운데에 맞춰 정렬
기타 scroll-padding, scroll-margin 이 있다.
[code]
<!doctype html>
<html>
<head>
<style type=”text/css”>
html {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
margin: 0;
padding: 0;
}
.element {
scroll-snap-align: start;
scroll-snap-stop: normal;
width: 100vw;
height: 100vh;
color: white;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.element:nth-child(1) {
background: #1d1e21;
}
.element:nth-child(2) {
background: #ee6620;
}
.element:nth-child(3) {
background: #777ba0;
}
.element:nth-child(4) {
background: #da1e62;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>[/code]