컴팩트한 사용자 경험을 위한 Scroll -Snap 기법

홈페이지... 더 이쁘게... 진행시켜...!!

 

지난주에 완료 보고 후 젠킨스까지 입히고 약간의 꿀을 빨고자 했던 이번 주... 

하지만 중국을 갔다 오신 대표님의 한마디에 또 다시 나는 css 의 늪에 빠지고 말았다 ㅠ

그래서 요구사항을 들어보니 다른 회사들 landing 페이지처럼 휙휙 넘어가는 메인 화면을 만들고 싶어 하시는 거 같았다.

(실제오더 : 아니 그냥 쭉쭉해서 페이지 넘기는거처럼 넘어가게 좀 해바바)

이걸 또 찰떡 같이 번역해서 다른 회사들은 어떤 기능을 쓸까 파악해보니 Scroll-Snaps이란 속성을 사용하고 있다는 걸 알았다.

 

Scroll-Snap 이란??
사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성

 

 

 

Scroll-Snap 속성과 활용법

 

• scroll-snap-type : 스크롤 컨테이너 (보통 스크롤이 발생하는 부모요소) 에 적용, 스크롤 스냅의 방향과 스냅의 엄격성을 정의한다.
  - 방향은 x (가로), y (세로), both (가로세로) 가 될 수 있다.
  - 엄격성은 'mandatory' (항상 가장 가까운 스냅 지점에 정렬) or 'proximity' (사용자의 스크롤 정도에 따라 가까운 스냅지점에 ㄴ정렬) 중에 선택이 가능하다.
• scroll-snap-align : 이 속성은 스크롤 컨테이너 내의 자식요소 (실제 스크롤 스냅 될 각 요소) 에 적용이 된다. 각 스냅요소가 스냅될 때 컨테이너 내에서 어떻게 정렬될지를 결정한다.
  - 속성 값으로는 'start', 'end', 'center' 등이 있으며, 요소가 스냅 포인트에 도달했을 떄 해당 위치에 정렬된다. 

 

Scroll-container & Scroll-area 적용

 

/* 부모 스크롤 스냅 컨테이너 */
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* y 축 방향으로만 scroll snap 적용 */
}

/* 자식 스크롤 스냅 영역 */
.scroll-area {
  height: 100vh;
  scroll-snap-align: start; /* 스크롤 위치 맞춤 */
}

 

 

두구두구 과연 결과는???

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

젠장... viewpor 에 header 영역을 계산을 안해서 그런가 가려지는 현상이 나타났다.. 그리고 캡쳐화면엔 안나오지만 

스크롤바가 두개가 생겨버려서 이걸 해결 해야할거 같다. 

 

Footer 역시 Scroll-area 에 포함

 

추측해보건데 scroll-area 와 전체 document 스크롤 기준이 달라져서 생긴거 같다.

따라서 footer를 마지막 section 에 포함되게 한 후 다시 구동!

 

 

성공...!!