자바스크립트 스크롤 게이지 프로그레스바 (Scroll Gauge Progressbar)

자바스크립트 (JavaScript)

 

See the Pen 스크롤 게이지 표시 (Scroll Indicator gauge) by kimyangsun (@kimyangsun) on CodePen.

 

바닐라 자바스크립트 스크롤 게이지 프로그레스바 (Scroll Gauge Progressbar) 구현 예제입니다.

스크롤 정도에 따라서 화면 상단에 게이지바가 나타납니다.

 

현재 제 블로그에 적용되어있는 코드랑 같습니다. :)

 

window.addEventListener('DOMContentLoaded', function(){
  // 스크롤 이벤트 처리
  window.addEventListener("scroll", function(event){
    if(document.querySelector('.progressbar') != null)setProgress();
  });
});

function setProgress() {          
  let currY = document.documentElement.scrollTop; // 스크롤한 높이
  let totalY = document.documentElement.scrollHeight - document.documentElement.clientHeight; // 전체 높이
  let percentage = (currY / totalY) * 100; // 퍼센트 값
  document.querySelector(".progress").style.width = percentage + "%"; // 프로그래스바 너비 변경
}