순수 바닐라js로 progress bar 만들기

요즘 너무 바쁜다는것을 핑계로 벨로그에 글을 안올린지 너무나 오래됐습니다..

간간히 올려야지 하는 생각은 드는데 쉽지가 않네요.

오늘 알아볼 것은 스크롤에 따른 진행바 만들기 입니다.

<script>

	window.addEventListener("scroll", function(){
            const progressbar = document.querySelector(".progressbar");

            // 스크롤 한 값
            const currentValue = window.scrollY;

            // document 문서 전체 높이
            const documentHeight = document.documentElement.scrollHeight;
            
            // 보여지는 window의 높이
            const windowHeight = window.innerHeight;

            const currentPercent = currentValue / (documentHeight - windowHeight) * 100;
            progressbar.style.width = currentPercent + "%";
        })
</script>
        

위의 js 코드를 작성 하기 전에 html을 작성 해주고,

<span class="progressbar"></span>

css로 width를 0으로 해주고 background-color를 넣어 줍시다.

정확한 scroll값을 위해서

*{padding:0; margin:0; box-sizing: border-box;}

css에 넣어줍니다.

내가 스크롤한 값과 document문서의 전체높이와 처음에 보여지는 높이인 window.innerHeight를 빼고 곱하기100을 해주어 백분율을 나타내준 후 나눈값을 currentPercnet로 변수에 담아줍니다.

width값에 변수 + "%"

이렇게 되면 완성 입니다!

처음에 프로그레스바를 구현하기 위해서 구글링을 하면 바닐라자바스크립트로 만든것이 아닌 전부 jquery로 구현한 게시물만 있기에, 한 번 이것저것 해보고 시도해보았습니다! 감사합니다.