javascript 스크롤 상태바 만들기 (window / div)

스크롤을 함에 따라 상태바가 스크롤 위치에 따라 변경되며 상태를 보여주는 스크롤 프로그레스 바를 만들어보았습니다. 

완성된 모습

생각보다 간단해서 공유해보고자 합니다. 

우선 마크업을 합니다. 보통은 window 스크롤을 많이 사용하지만 저는 div에 스크롤을 주고 적용해 보려고 합니다. 

 

// index.html
<div class="wrap">
    <div class="barWrap"><div class="bar"></div></div>
    <div class="perWrap"><span class="per">0%</span></div>
    <div class="inner">
        <ul>
            <li>{ ...contents }</li>
        </ul>
    </div>
</div>

// style.css
html, body, .wrap {
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}

.wrap {
    position: relative; 
    overflow-y: auto;
    padding-top: 13px;
}

.barWrap {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 13px; 
    background: lightslategrey;
}

.bar {
    position: fixed; 
    top: 0; 
    left: 0;
    height: inherit;
    background: black; 
    color: white;
}

.inner {
    padding: 20px;
    line-height: 3;
    
}

div에만 스크롤을 주기 위해 html, body 모두 overflow hidden 처리시킵니다. 

이 상태에서는 스크롤을 가진 요소는 wrap이 되고 상태를 표시해줄 객체는 bar가 됩니다. 

그리고 해당 div에서 스크롤을 할때마다 값을 가져와야 하므로 addEventListener에 타입을 scroll로 지정합니다. 

 

구현을 위해 필요한 겂들을 확인하기 위해 다음과 같이 콘솔에 찍어봅시다.

// index.js
let wrap = document.querySelector(".wrap"); 

wrap.addEventListener('scroll', function(){
   console.log("scrollTop: ", wrap.scrollTop);
   console.log("scrollHeight: ", wrap.scrollHeight);
   console.log("clientHeight: ", wrap.clientHeight);
})

만약 스크롤의 대상이 div가 아닌 window라면 wrap을 document.querySlector('. wrap')이 아닌 document.documentElement으로 선언해주세요. 어차피 이외의 로직은 동일합니다.

이 값들은 전체 높이에서 스크롤위치에 따라 비율을 구하는 로직을 만드는 데 사용됩니다. 

각각의 값은 아래의 이미지를 참고해주세요. 

죄송해요 발로 그렸음..

먼저 전체 높이(scrollHeight)에서 화면에 표시되는 높이(clientHeight)를 제외하고 나머지에서 스크롤의 위치를 나눈다면 나머지 값이 나옵니다. 100을 곱하여 퍼센트로 표시할 수 있습니다. 

// index.js
let wrap = document.querySelector(".wrap");
let bar = document.querySelector('.bar');

wrap.addEventListener('scroll', function(){
    let scrollTop = wrap.scrollTop;
    let scrollHeight = wrap.scrollHeight - wrap.clientHeight;
    let percentage = (scrollTop/scrollHeight) * 100;
    bar.style.width = percentage + '%';
})

이렇게 하면 스크롤에 따라 progress bar가 위치에 따라 변화하는 것을 알 수 있습니다. 

좀 더 부드러운 움직임을 주고 싶다면 bar에 transition을 추가해주면됩니다. 

// style.css

.bar {
    ...
    transition: .1s ease;
}

 

어차피 bar의 width값이 넘어오니 이를 이용해서 퍼센트를 나타내는 숫자도 추가해 보도록 하겠습니다. 

값을 계산할때 소수점까지 나타나므로 Math.floor로 소수점을 제거해 줄 겁니다. 

// index.html
<div class="wrap">
    <div class="barWrap"><div class="bar"></div></div>
    <div class="perWrap"><span class="per">0%</span></div> <!-- add -->
    <div class="inner">
        { ... }
    </div>
</div>

// style.css

{...}

.perWrap {
    position: fixed; 
    top: 20px; 
    left: 10px;
    width: 50px; 
    height: 50px; 
    text-align: center;
    background: black; 
    color: #fff; 
    border-radius: 100%;
    line-height:3.5;
    font-size: 13px;
}

// index.js
let wrap = document.querySelector(".wrap");
let bar = document.querySelector('.bar');
let per = document.querySelector('.per'); // add

wrap.addEventListener('scroll', function(){
    {...}
    per.innerText = Math.floor(percentage) + '%'; // add
})

이렇게 하면 숫자로 표시가 됩니다.

 

하지만 한 가지 문제점이 있습니다. 만약 스크롤 하던 중 viewport의 사이즈가 달라져 버린다면, 계산을 하지 못하고 NaN을 뱉어버립니다. (Not-A-Number:숫자가 아님) 

NaN인 경우 0을 리턴하도록 스크립트 한 줄을 추가해 줍니다. 

let wrap = document.querySelector(".wrap");
let bar = document.querySelector('.bar');
let per = document.querySelector('.per');

wrap.addEventListener('scroll', function(){
    {...}
    if(isNaN(percentage)) percentage = 0;  // add
    bar.style.width = percentage + '%';
    per.innerText = Math.floor(percentage) + '%';
})

이렇게 하면 비로소 완성입니다! 😸