Javascript - 스크롤 프로그레스바

가끔 구글링 중 특정 블로그를 들어가면 스크롤 할 때마다 바가 채워지는 UI가 있다. 그거 만드는게 생각보다 간단하더라.

1. 맨 위~아래의 스크롤되는 용량을 파악

let scroll = document.querySelector('html').scrollTop;

2. 화면에 보이는 높이 파악

let client = document.querySelector('html').clientHeight;

3. 실질적인 전체 페이지 높이 파악

let scrollHeight = document.querySelector('html').scrollHeight;

4. 스크롤 용량 = 실질 높이 - 화면 높이이므로

let gauge = scrollHeight - client;

5. 스크롤 양을 퍼센트로 나타내면

let gaugePer = (scroll / gauge) * 100;

전체 소스는

window.addEventListener('scroll', function(){
	let scroll = document.querySelector('html').scrollTop;
    let client = document.querySelector('html').clientHeight;
    let scrollHeight = document.querySelector('html').scrollHeight;
    let gauge = scrollHeight - client;
    let gaugePer = (scroll / gauge) * 100;
    document.querySelector('.scroll-bar').style.width = gaugePer + '%';
});

(!) .scroll-bar는 실제 가변하는 bar의 width를 class로 준 것.
부모의 div width를 100%로 두고, 내부에 바의 자리를 잡아주면 될 듯