[CSS] 스크롤 스냅 (Scroll Snap)

 

---

CSS 로고

---

CSS: 스크롤 스냅이란?

CSS: Scroll Snap 

 

얼마 전 CSS에 새롭게 추가된 기능인 스크롤 스냅에 대해 알아보겠습니다. 스크롤 스냅이 무슨 기능이냐 하면, 제목에서도 유추해볼 수 있듯, 마우스를 스크롤링해서 화면을 위/아래로 올리고 내릴 때, 현재 화면과 다음 화면 사이의 절대 비율이 50%를 넘어갈 경우, 비율이 높은 쪽으로 자석처럼 스냅! 딱 달라붙는 효과를 구현해주는 기능입니다. 즉, CSS 스크롤 스냅이란, 웹사이트의 스크롤을 어떤 방식으로 작동시키고 구현할지 결정하는 역할을 합니다. 예전에는 자바스크립트(JavaScript)를 사용해야지만 구현할 수 있었던 기능이지만, 이제는 CSS를 이용해, 그것도 딱 두 줄의 코드만 추가하면 해결할 수 있게 됐습니다. 다음 예시를 통해 CSS 스크롤 스냅의 사용방법에 대해 설명드리겠습니다.

 

스크롤 스냅 테스트 샘플1

스크롤 스냅 테스트 샘플2

스크롤 스냅 테스트 샘플3

 

---

 

---

 

▶ CSS 스크롤 스냅 (Scroll Snap)의  사용방법:

 

예시를 위한 index.html의 일부분 입니다.

<div class="container">
    <div class="item item4">4</div>
    <div class="item item5">5</div>
</div>

위 index.html을 꾸며주는 style.css입니다.

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 100vh;
    overflow: auto;
    scroll-snap-type: y mandatory;
}
.item {
    width: 100%;
    height: 100vh;
    scroll-snap-align: center;
}
.item4 {
    background: #80cbc4;
}
.item5 {
    background: #e6ee9c;
}

위 예시에서 보는 바와 같이, 부모에게 scroll-snap-type으로 y mandatory; 값을 설정해주고, 자식에게는 scroll-snap-align으로 center; 값만 부여해주시면 됩니다.

 

---

/* ADD THIS TO THE PARENT */
scroll-snap-type: y mandatory;

/* ADD THIS TO THE CHILD */
scroll-snap-align: center;

---

CSS 스크롤 스냅 기능을 잘 활용하면 웹사이트를 보다 세련돼 보이도록 꾸밀 수 있고, 또 기능적으로도 잘 구현된 웹사이트라는 인상을 줄 수 있기 때문에, 적절한 활용을 권장합니다.

 

---