자바스크립트 이용해서 스크롤내릴때 차는 게이지바 만들기

맨위에 <div id='gauge-bar'></div> 만들어준다

#gauge-bar {
  position: fixed;
  height: 5px;
  background-color: gray;
  z-index: 1;
}

게이지바 모양,색상 css적용시켜준다

window.addEventListener('scroll', function() {
  	// 게이지바 엘리먼트와 현재 스크롤 위치를 가져옴
    var gaugeBar = document.getElementById('gauge-bar');
    var scrollPosition = window.scrollY || window.pageYOffset;
  
  	// 전체 페이지 높이와 브라우저 창 높이를 가져옴
    var pageHeight = document.documentElement.scrollHeight;
    var windowHeight = window.innerHeight;
  
  	// 현재 스크롤 위치에서 게이지바가 차는 비율을 계산
    var fillRatio = scrollPosition / (pageHeight - windowHeight);
  	
   	// 계산된 비율로 게이지바 채우기
    gaugeBar.style.width = (fillRatio * 100) + '%';
  
});

결과

스크롤바도 잘 차고 , 로그찍어보니 스크롤마다 width가 잘 늘어나는것을 볼수있다