스크롤 페이지 프로그레스바 소스코드(자바스크립트)

이 블로그에도 사용되고 있지만, 요즘 많은 블로그에서 사용하고 있는 기능이 마우스를 스크롤하면 화면 상단에 페이지를 어느 정도 보고 있는지 알려주는 프로그레스바(Progressbar, Indicator) 입니다. 특히 모바일을 사용할 경우에는 글이 길어서 현재 어느정도 보고 있는지 알 수 있으면 도움이 많이 되죠.

이번 소스에서는 JQuery를 사용하지 않고, vanila 자바스크립트만 사용해 구성해 보도록 하겠습니다.

1. HTML에 프로그레스바 소스코드 넣기

우선 먼저 HTML에 프로그레스바 소스코드를 넣어 보겠습니다.

기본적으로 페이지 제목을 화면 상단에 고정시키고 그 밑에 프로그레스바를 보여주는 방식으로 하겠습니다.

<div class="header">
  <h1>페이지 제목</h1>
  <div class="progress-container">
    <div class="progress-bar" id="progress-bar-id"></div>
  </div>
</div>

위의 코드가 헤더 부분의 코드가 되고요, 내 홈페이지의 제목 밑에 'progress-container' 부분을 넣어 줍니다.

2. CSS에 프로그레스바 소스코드 넣기

다음에는 CSS에 프로그레스바 소스코드를 추가하겠습니다.

/* 고정 헤더*/
.header {
  position: fixed;  /* 고정 헤더*/
  top: 0;           /* 헤더의 위치를 화면 제일 위로 지정*/
  z-index: 1;	    /* 페이지의 내용 위에 보여주기*/
  width: 100%;      /* 화면의 가로폭을 전부 사용*/
  background-color: #f1f1f1; /* 헤더의 배경색*/
}

/* progress bar를 감싸는 container */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

/* progress bar */
.progress-bar {
  height: 8px;
  background: #4caf50;
  width: 0%;
}

위의 코드중에서 '.header'는 기존의 여러분의 블로그에 있는 헤더 부분과 약간 충돌할 수 있으니 주의하세요.

3. 자바스크립트 프로그레스바 소스코드 넣기

마지막으로 자바스크립트 프로그레스바 소스코드를 우리 홈페이지의 넣도록 하겠습니다.

3.1 자바스크립트 파일에 넣는 경우

window.onscroll = function() {progressBar()};

function progressBar() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progress-bar-id").style.width = scrolled + "%";
}

3.2 HTML에 넣는 경우

<script>
window.onscroll = function() {progressBar()};

function progressBar() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progress-bar-id").style.width = scrolled + "%";
}
</script>

위의 코드를 <header></header>에 넣으셔도 되지만 </body>바로 앞에 넣어주시는 것이 더 좋을 것같네요. SEO에서는 꼭 필요한 경우에만 자바스크립트를 <header></header>에 넣도록 하고 있으니까 화면을 로딩하는데 필요하지 않는 자바스크립트는 HTML소스의 후반에 넣는 것을 권장합니다.