프로그레스 바 만들어보기

여기서 만들 건 나우 로딩하면 나오는 프로그레스 바가 아니라, 스크롤 프로그레스 바다. 티스토리 블로그 중에 가끔 글을 읽을 때 화면 상단에 무슨 막대기같은 게 자라는 게 있는데, 그걸 해 볼거다.

---

Reference

https://doooodle932.tistory.com/177

[JS] 스크롤 프로그레스 바 만들기

 

https://sunshineyellow.tistory.com/88#clientHeight

[코딩애플] 요소의 높이와 위치값 구하기 (clientHeight, offsetHeight, scrollHeight, getBoundingClientRect())

---

일단 이건 스크롤을 해야 하는 거기 때문에 분량을 급나 길게 늘려야 한다. 그래서 폰트 크기에 줄 높이 주고 로렘입숨을 겁나 때려박아서 기이이이이이이이이이일게 만들었다.

 

const progressBar = document.querySelector('#progress');

만들었으면 가져오십쇼.

 

#progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #f7cac9;
}

깜빡하고 CSS 생략할 뻔 했는데, 보통 프로그레스 바는 화면 상단에 있다. 그러니까 위치를 화면 상단으로 고정해야 한다.

 

이 스크롤바 역시 이 블로그에 단골로 등장하는 이벤트 리스트너를 이용할건데... 그럼 여기서 짬 좀 있으신 분들은 감이 좀 오실 것이다. 아니 이거 스크롤 이벤트도 커버가 돼요? 아니 글쎄 그것까지 커버가 되더라고요? 얘 대체 안되는게 뭐임? 

 

document.addEventListener('scroll',()=>{
  let scrollNum = window.scrollY;
  console.log(scrollNum);
})

이런 식으로 스크롤 높이를 가져온 다음 거기에 맞춰서 작대기 크기를 늘였다 줄였다 하면 된다고 보시면 된다. window.scrollY 말고 document.documentElement.scrollTop도 쓴다. 

 

document.addEventListener('scroll',()=>{
  let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let progressPercent = window.scrollY / scrollHeight
  console.log(progressPercent)
})

뭐임? 왜 갑자기 많아짐? 을 이제 하나씩 풀어보자...

 

document.documentElement.scrollHeight은 본문에 로렘 입숨을 급나 때려박아서 만든 높이이다. 그러니까 캡쳐된 부분 말고 그 밑에 더 있는 본문까지 해서 나오는 높이를 말한다. 그리고 document.documentElement.clientHeight은 나도 뭔지 모르겠음… 패딩을 포함한 요소의 높이라는데 이건 좀 더 알아봐야겠음.

 

그래서 이게 뭐 하는건데요? 저 작대기 길이 정할라면 계산을 해야 할 거 아닙니까. 프로그레스 바 길이 정할라고 계산하는거다.

 

document.addEventListener('scroll',()=>{
  let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; //뒤에꺼 뭔지 모르겠음...
  let progressPercent = (window.scrollY / scrollHeight) * 100;
  progressBar.style.width = progressPercent + "%";
})

그리고 길이 계산해서 프로그레스 바 길이 바꾸게 하면 땡이다.

 

티스토리 블로그에 적용중인 프로그레스 바. 이거 괴담수사대에도 적용중인데, 모바일 버전에서는 껐다. (미디어쿼리로 끌 수 있음)

 

코드펜에 적용한 프로그레스 바. 단색 뿐 아니라 그라데이션도 가능하다. 티스토리 블로그에 적용한 것도 그라데이션이다.

 

See the Pen progress bar(JS) by koreanraichu (@koreanraichu) on CodePen.

가서 직접 휠을 굴려보자.