[티스토리 스킨 편집] 스크롤 진행률 표시줄(scroll indicator) 만들기

 

영어로는 scroll indicator.

다시 말해 스크롤 진행률 바(bar)? 스크롤 진행률 표시줄? 모자란 국어 실력에 깔끔하게 설명하기가 힘들다.🤔

말하자면 내가 지금 문서의 어디쯤 읽고 있는지 표시하는 상태 바(bar)인데

보이는 부분으로만 따져보면 인터넷 창 우측의 스크롤바와 같달까.

(다만 기능적인 측면은 다르다. 클릭 & 드래그로 페이지 이동은 불가.)

 

근데 이걸 하나 더 만들어 페이지 상단에 콕! 박아볼까 한다.

 

실은 오래간만에 블로그 뭐 또 뜯어고쳐볼 거 없을까 하고 기웃거리다 scroll indicator가 생각났는데

스크롤바가 너무나 잘 보이는 데스크톱에서는 개인적으로 필요성을 못 느끼는 기능이다.

한다면 그냥 멋이랄까. "나 이런 거 할 줄 알아요!"라는.😆

 

그런데 생각해보니 모바일에서 내가 자주 쓰는 크롬, 그리고 네이버는

페이지를 스크롤할 때만 잠깐 스크롤바가 나타났다가 사라지기 때문에

이거 한 번 해볼 만하다 싶어서 오늘도 도전!

 

 

 

 

오늘도 자바스크립트 쪼렙은 없는 게 없는 구글링으로 해서 방법을 찾았다.

처음에 이걸 뭐라 설명해야 할지 몰라 그냥 jquery page scroll progress bar로 검색했다가

제일 상단의 이 페이지를 발견했다.

 

www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_indicator

Tryit Editor v3.6

 

믿고 보는 w3schools의 scroll indicator 만들기~

(page scroll progress bar라고 검색하면서도 이름이 긴가민가 했는데

내가 하고자 하는 기능의 이름은 scroll indicator 였다.)

 

스텝 원, 투, 쓰리! 의 간단한 단계라 한번 샥 보고 바로 블로그에 적용해봤다.

 

 

 

<div class="progress-container">
	<div class="progress-bar" id="indicator"></div>
</div>

 

우선 HTML 편집에서 <header> 바로 위에 위의 코드를 넣어준다.

 

progress-container가 진행률을 나타내는 바(bar)의 배경이 될 예정이고,

그 안의 progress-bar는 말 그대로 진행률을 나타내게 된다.

 

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

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

그리고 계속 HTML 편집에서 쭉쭉쭉 밑으로 내려 </body> 바로 위에

이렇게 작성해준다.

 

 

.progress-container {
    position: fixed; /* 상단에 고정 */
    top: 0; /* 위치는 위에 딱 붙게 */
    width: 100%; /* 넓이는 100% */
    height: 4px; /* 높이는 4px */
    background: transparent; /* 배경색 투명하게 */
    z-index: 1000; /* 다른 요소들보다 위에 보이게 */
}
.progress-bar {
    height: 4px;
    width: 0%;
    background: #6acbe1; /* 표시될 배경색 */
}

그리고 이어 CSS에는 이렇게 작성.

나는 이전에 light모드와 dark모드를 만들었던 터라 그에 맞게 색상을 두 개를 지정해봤다.

(그리고 기본적으로 .progress-container에 top: 0;과 z-index: 1000;은 필요 없지만

그동안 하도 스킨을 야금야금 건드리다 보니 이 두 개는 개인적인 필요에 의해 추가했다.)

 

 

그리고 적용을 누르고 페이지를 새로고침 해보면

 

이렇게 상단에 페이지 어디쯤인지 알려주는 바(bar)가 새로 생겼다!

 

 

모바일로도 페이지 맨 위에서 정상 작동 중이다.

심지어 양 옆 필름이 다 들떠 스크롤이 보일락 말락 한 환경이라 그런지 만족도가 높다.🥰

 

 

 

 

---

 

 

 

 

 

+덧

 

다 만들어놓고 창을 하나 둘 닫으며 보니

CSS only scroll indicator라는 검색 결과가 보인다...!

 

살짝 구경하니 어떠한 스크립트도 없이 CSS에서  @supports로 계산해서 뭔갈 하는데

생전 처음 보는 @supports에(@media @keyframes 말고 골뱅이가 더 있을 줄이야),

이건 빼박 자바스크립트라고 생각했던 기능인데 CSS only라서 마냥 신기...

이것도 한 번 나중에 시도해 봐야겠다.