[CSS] 스크롤 스냅 - 자바스크립트 없이 css로 풀페이지 만들기 Scroll Snap

스크롤 스냅 (Scroll Snap) ?

 

scroll snap 스크롤스냅

위의 애니메이션처럼 스크롤 하면 틀에 맞게 스크롤 되는 것을 스크롤 스냅 (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 는 해당 요소의 부모 컨테이너의 중앙을 스냅 축으로 정한다.

 

 

 

html

<h1>가로</h1>
<div class="scroll-box horizon">
    <div class="item" style="background: coral;">1</div>
    <div class="item" style="background: rgb(121, 241, 215);">2</div>
    <div class="item" style="background: rgb(206, 255, 187);">3</div>
    <div class="item" style="background: rgb(247, 179, 216);">4</div>
    <div class="item" style="background: rgb(167, 202, 255);">5</div>
</div>
<h1>세로</h1>
<div class="scroll-box vertical">
    <div class="item" style="background: coral;">1</div>
    <div class="item" style="background: rgb(121, 241, 215);">2</div>
    <div class="item" style="background: rgb(206, 255, 187);">3</div>
    <div class="item" style="background: rgb(247, 179, 216);">4</div>
    <div class="item" style="background: rgb(167, 202, 255);">5</div>
</div>

 

 

css

 

.scroll-box {
    display: flex;
    width: 300px;
    height: 200px;
    margin: 10px;
}
.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%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 50pt;
}
.scroll-box::-webkit-scrollbar {background-color:#fff; height:4px; width: 4px;}
.scroll-box::-webkit-scrollbar-track {background-color:#fff}
.scroll-box::-webkit-scrollbar-thumb {background-color:#babac0; border-radius:4px}