[Javascript] 현재 스크롤 퍼센트를 나타내주는 bar

스크롤을 내리면 전체 페이지 중 현재 어디 쯤을 읽고있는지 나타내주는 바를 만들어 보았다.

 

HTML

  <div class="bar">

    <div class="percent"></div>

  </div>

 

CSS

body,

html{

  height: 6000px;

}

.bar{

  width: 100vw;

  height: 50px;

  position: fixed;

  top: 0;

  left: 0;

  background-color: #999;

}

.percent{

  width: 0;

  height: 100%;

  background-color: black;

  transition: all 0.1s;

}

전체 높이 6000px로 잡아주고 bar 박스는 위에 고정시켜주었다.

 

JAVASCRIPT

let percent = document.querySelector('.percent');

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

window.addEventListener('scroll',function(){

  let y1 = window.scrollY/ 6000 * 100;

  let y2 = (window.scrollY + screenHeight / 4) / 6000 * 100

  let y3 = (window.scrollY + screenHeight / 2) / 6000 * 100

  let y4 = (window.scrollY + screenHeight) / 6000 * 100

 

  if(y1 >= 75){

    percent.style.width = `${y4}%`

  } else if(y1 >= 50){

    percent.style.width = `${y3}%`

  }

  else if(y1 >= 25){

    percent.style.width = `${y2}%`

  }

  else if(y1 >= 0){

    percent.style.width = `${y1}%`

  }

})

 

우선 저렇게 y1, y2, y3, y4로 나눈 이유는 screenHeight는 고정된 값이라 window.scrollY에 바로 넣게 되면 한 번에 많은 양의 percent가 올라가기 때문에 서서히 올라가게 하기 위해서 저렇게 나누고 y1의 값에 따라 (스크롤 양에 따라) 나누어주었다. 물론 저렇게 해도 조금 어색하기 때문에 차라리 screenHeight에 대한 1차 방정식을 구해서 서서히 스크롤마다 더해주는 방법이 더 자연스러울 것이다. y변수들은 현재높이 / 전체 높이 * 100을 한 것으로 0~100이 되게 맞추었다.

 

- 주의사항

1. 그냥 window.scrollY를 찍으면 높이가 6000px인데 6000까지 찍히지 않는다. 왜냐하면 window.scrollY는 내가 스크롤한 양만 체크를 해주기 때문에 현재 내가 보고 있는 화면의 대한 값은 더해주지 않는다. 그렇기 때문에 window.scrollY에 screenHeight를 더해준 것이다.

 

2. 저렇게 고정된 값으로, 즉 전체 높이를 6000으로 해버리면 나중에 다른 페이지의 전체 높이가 7000이면 다시 짜야한다. 한마디로 확장성이 없는 코드라고 할 수 있다.

let percent = document.querySelector('.percent');

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

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

window.addEventListener('scroll',function(){

  let y1 = window.scrollY / totalHeight * 100;

  let y2 = (window.scrollY + screenHeight / 4) / totalHeight * 100

  let y3 = (window.scrollY + screenHeight / 2) / totalHeight * 100

  let y4 = (window.scrollY + screenHeight) / totalHeight * 100

  if(y1 >= 75){

    percent.style.width = `${y4}%`

  } else if(y1 >= 50){

    percent.style.width = `${y3}%`

  }

  else if(y1 >= 25){

    percent.style.width = `${y2}%`

  }

  else if(y1 >= 0){

    percent.style.width = `${y1}%`

  }

});

따라서 totalHeight라는 변수를 따로 만들어서 y변수에 6000 대신해서 넣어준다. totalHeight의 의미는 전체 높이를 알려준다. 이렇게 하면 전체 페이지 높이가 바뀌어도 문제없는 확장성있는 코드가 완성된다.

 

3. CSS파일에서 transition을 넣어주었는데 transition을 넣지 않고 screenHeight가 증가하면 갑자기 확 증가하고 딱딱하게 움직이기 때문에 transition을 넣어주었다. 단, 시간을 너무 크게 잡으면 스크롤할 때의 width가 너무 느리게 움직여서 작게만 넣어준다.