스크롤 표시기 Scroll Indicator를 만들어보자

이번 주는 프로그래스 바를 업그레이드한 방법으로 예제는 많이 나아 있는 것 같지만,

기록과 정리를 위해 글을 쓰게 되었다.

 

 

1. Scroll Indicator( 스크롤 표시기 )

CSS와 자바스크립트를 통해 이 페이지를 어디까지 보았는지 확인할 수 있는 일종의 게이지 바 같은 것이다.

사실 이 명칭을 어떻게 표현이 되는지 잘 모르겠다.

그래서 찾는데 생각보다 오래 걸려 하루 종일 회사 프로젝트에 이 한 가지 구현만 찾게 되었다. 하지만 실상은 너무 간단한 코드였다.

 

document.addEventListener('scroll', () => {
    progress = document.querySelector('.progress-bar');

  let winScroll = document.body.scrollTop || document.documentElement.scrollTop,
    height = document.documentElement.scrollHeight - document.documentElement.clientHeight,
    scrolled = (winScroll / height) * 100;
  progress.style.width = scrolled + '%';
});

document가 실행이 될 때, scroll 이벤트를 실행하는 코드다.

 

 

2. Explanation

다음 코드에 대한 설명이다.

document.body.scrollTop

 

body 전체의 scrollTop으로 기본적으로 0 값을 제공한다.

 

document.documentElement.scrollTop

document의 스크롤 위치값으로 스크롤을 내리거나 올릴 때 숫자가 감소/증가하게 된다.

 

위에서 winScroll값을 쓴 근본적인 이유는 솔직히 잘 모르겠다. 일단 추측은 저 둘 중에 값이 있는 것으로 winScroll값을 대입하는 것으로 추측 중이다.

 

document.documentElement.scrollHeight

document의 전체 스크롤 할 수 있는 길이를 숫자로 보여준다. 이 값은 html 코드나 CSS 변화가 없다면 값은 계속 동일할 것이다.

 

document.documentElement.clientHeight

document가 현재 사용중인 유저의 화면이 차지하고 있는 높이 값이다. 사용자가 임의로 브라우저의 크기를 줄이지 않는 다면 화면의 크기는 동일할 것이다.

 

즉, height의 의미는 전체 스크롤할 수 있는 크기에서 현재 클라이언트의 화면을 뺀 높이값이다.

 

여기서 scrolled값으로 100을 나누어 퍼센티지로 실시간으로 scroll이 될 때마다 값이 변하는 것이다. 그리고 그 값을 CSS로 대입을 한 것이라 할 수 있다.

 

3. Example

다음은 필자가 만든 예제이다.

See the Pen Scroll Indicator by miok-jung (@miok-jung) on CodePen.

여기서는 스크롤 될때 상단의 게이지가 어떻게 변하는지에만 주의하며 보기를 권장한다.

 

 

 

이렇게 이번주에는 scroll 이벤트에서 게이지가 차오르는 이벤트에 대해 알아보았다.

 

기본적으로 HTML에서 progress라는 태그를 제공하고는 있지만,

필자가 쓰기에는 현 회사 프로젝트에는 맞지 않는 구조였다.

그래서 부득이하게 스크립트 기능으로 알아보다가 알게 되었다.

 

비록 이 방법이 현재 이 글을 읽는 자에게는 정답일 수도 있고 아닐 수도 있다.

 

하지만 앞으로도 더 다양한 난관이 올 때,

필자는 이런 기능을 썼다는 것을 통해 조금 더 빠른 코드 구현을 할 수 있는 미래가 오기를 바란다.