EVENT-SCROLL

페이지 스크롤에 따라 진행 상태를 나타내는 프로그래스 바를 만드는 자바스크립트 코드.

let maxScrollValue ; //최대스크롤범위 변수 지정
const progressBar = document.querySelector('.progress-bar');

function resizeHandler(){
    // 전체스크롤의 범위  = 바디 전체 높이( 페이지의 전체 높이) - 윈도우 현재 창의 높이
    maxScrollValue = document.body.offsetHeight - window.innerHeight;
}
window.addEventListener('scroll', function(){
    // console.log((window.scrollY / maxScrollValue)*100);
    // console.log(window.pageYOffset); // deprecated
    progressBar.style.width = (window.scrollY/maxScrollValue)*100 + '%'; 
  //현재 스크롤 위치와 전체 스크롤 범위를 사용하여 프로그래스 바의 너비를 계산한다. 프로그래스 바의 너비는 현재 스크롤 위치가 전체 스크롤 범위에 대해 얼마나 진행되었는지를 퍼센트로 표시한다. 
    
});

window.addEventListener('resize', resizeHandler);
resizeHandler();