스크롤 UI

---

코딩애플 센세 강의를 듣다가 남겨 놓으면 나중에 좋을거 같아서 작성한다.

---

스크롤 이벤트리스너에서 사용되는 유용한 기능들

• .scrollY : 현재 페이지를 얼마나 위에서 부터 스크롤 했는지 px 단위로 알려줌

• .scrollX: 가로로 얼마나 스크롤 했는지 알려줌

• .scrollTo(x,y) : 강제로 스크롤바를 움직일 수 있음
  x = 가로
  y = 세로

• .scrollBy(x,y) : 현재 위치에서부터 스크롤 해줌
  x = 가로
  y = 세로

• .scrollTop : div 박스에서 스크롤 얼마나했는지 알려줌 scrollY 는 사용해도 안나온다.

• .scrollHeight : 전체 높이를 알고싶은 경우에 사용
  웹페이지에 스크롤이 있는데 전체 높이를 알고 싶을때 사용하거나 div박스 스크롤의 전체 높이를 알고 싶을 때 사용

• .clientHeight : 현재 보이는 높이를 알고 싶은 경우에 사용

---

스크롤 UI를 응용해서
페이지 내릴 때 마다 페이지를 얼마나 읽었는지 진척도를 알려주는 UI를 만들어 보았다.

HTML CSS 코드
<div class="topscroll"></div>  

<style>
.topscroll{
  background-color: red;
  padding: 1px;
  width: 0%;
  position: fixed;
  z-index: 10;
  transition: all 1s;
}
</style>

position: fixed; 와 z-index: 10; 를 준 이유는 상단에 nav 바가 있는데 그 위에 고정시키기 위해서이다. z-index 에는 네브바보다 높은 수를 줘 가장 위에 떠 있게 해주었다.

j코드
function topSlide(){
     
  const htmlScr = window.scrollY // 461
  let num = 461*0.3

    if (htmlScr === 0){
     document.querySelector('.topscroll').style.width = '0%'
    }
    if(num <htmlScr){
       document.querySelector('.topscroll').style.width = '30%'
       num = 461*0.6
     }
      if(num<htmlScr){
       document.querySelector('.topscroll').style.width = '60%'
       num = 461* 0.9
     }
      if(num<htmlScr){
       document.querySelector('.topscroll').style.width = '100%'
     }
   }

   window.addEventListener('scroll',topSlide)

코드가 더럽다!
window.scrollY 를 이용하면 스크롤을 할 때 마다 스크롤이 얼마나 이루어졌는지 값이 계속 변경된다.
가장 밑으로 내려 최대 스크롤 값을 확인한 후 30,60,90% 일때의 값을 계산해서 window.scrollY 값이 30,60,90 퍼센트보다 큰경우에 div 바가 색이 채워지게 구현을 해보았다.
그리고 transition: all 1s; 을 줘서 부드럽게 표현!

아쉬운점은 웹 페이지의 길이가 늘어날때마다 window.scrollY 를 이용해서 길이를 구해서 변경해줘야한다는 점이다.
생각해 보면 변수화해서 할 수 있을거 같긴한데,,, 고민해보자