[css] 스크롤을 부드럽게 알맞은 위치로 - 'scroll snap'

스크롤을 내렸을 때 내가 원하는 위치로 조정되는 부드러운 사용성을 경험해 봤을 것이다.

이것은 간단히 css을 활용해 구현이 가능하며 이를 snap scroll이라 부른다. ( 스냅 스크롤 )

 

snap scroll 모듈을 사용하지 않으면 사용자가 직접 스크롤을 내렸을 때 화면 컨텐츠가 개발자가 생각했던 위치에 정확히 오지 않거나, 화면의 위치를 계속 측정하면서 스크롤을 특정 위치로 옮기려할 경우 많은 js 코드가 소모되기 때문에

 

snap scroll css을 활용하면 스크롤 조작을 편리하게 사용할 수 있으며, 정확한 정보전달 및 유저의 사용성 향상에 도움된다.

 

Summary

1. 부모와 자식 요소의 height을 동일하게 설정

2. 부모 엘리먼트 css 설정
overflow-y : scroll ;

scroll-snap-type : y mandatory ;

3. 자식 엘리먼트 css 설정
scroll-snap-align : start ;  / * none, end, center  * /

 

Result

See the Pen Scroll Snap Demo by wkddkdud (@angpeng) on CodePen.

 

코드 작성

- html

<div class="scroll-container">
	<div class="scroll-area">hello</div>
	<div class="scroll-area">let's learn about</div>
	<div class="scroll-area">"snap scroll"</div>
	<div class="scroll-area">together ❣</div>
</div>

scroll 되는 전체 영역을 scroll-container, scroll 발생 시 도달했으면 하는 위치를 scroll-area로 클래스명을 지정한다.

 

- css ( 디자인 꾸미기 위한 불필요 css 제거 )

.container {
  height: 100vh;
  overflow: auto;  /*  overflow-y: scroll  */
  scroll-snap-type: y mandatory;  /*  proximity  mandatory  */
}

.scroll-area {
  height: 100vh;
  scroll-snap-align: start;
}

 

이렇게 간단한 2문단의 css로 snap scroll 구현이 가능하다.

scroll-container 와 scroll-area의 높이를 동일하게 지정해주고, scroll-container 높이보다 overflow가 발생할 경우 auto 설정을 통해 overflow 발생한 y축에 스크롤이 생성된다.

 

scroll-container에 overflow:auto를 지정할 경우 scroll-container 자체에 scroll이 적용되지만

 

overflow:auto 하지않을경우 전체 컨텐츠 크기에 맞기 scroll이 생성되므로 snap scroll이 작동될 수 있게 container에 적용해준다.

이제 자식 영역의 스크롤 정렬을 start로 해주면 스냅 스크롤 설정이 끝난다.

 

 

 

이어서 navbar를 생성해 클릭시 부드럽게 해당 스크롤 영역으로 이동하는 화면을 구현해보자.

이 또한 1줄의 css만 첨가하면 가능하다.

 

Result

See the Pen Snap Scrolll + scroll Bottom content animation by wkddkdud (@angpeng) on CodePen.

 

 

코드 작성

- html

<div class="navbar">
      <a href="#section1">1</a> // a 태그에 href 적용
      <a href="#section2">2</a>
      <a href="#section3">3</a>
      <a href="#section4">4</a>
</div>

<div class="scroll-container">
	<div class="scroll-area" id="section1">hello</div> // 각 section에 고유 id 추가
	<div class="scroll-area" id="section2">learn about</div>
	<div class="scroll-area" id="section3">"snap scroll"</div>
	<div class="scroll-area" id="section4">together ❣</div>
</div>

 

- css

.container {
  scroll-behavior: smooth;
}

/* 스크롤 둥글게 css */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(189, 189, 189, 0.8);
  border-radius: 10px;
}

스크롤 디자인은 둥글게 적용시키고, href가 연결된 a 태그 클릭 시 부드럽게 해당 영역으로 이동할 수 있도록 스크롤 움직임을 smooth로 설정해주면 된다.

 

 

 

참고 블로그

https://wit.nts-corp.com/2018/08/28/5317

CSS Scroll snap points 소개 (스크롤 스냅 포인트 소개) | WIT블로그

 

Posted by Ang