스크롤 하면 프로그래스바 채우기

* 공부 및 자격증을 위해 작성하는 글입니다.

* 부족한 내용이나 틀린 내용을 알려주시면 감사합니다.

* 코딩애플 js 강의를 참고하여 기능을 연습했습니다.

---

 

스크롤 기능은 예전에 학원에서 수업 받았을 때

문법 형태도 다 비슷해서 헷갈리기도 했고

왜인지 모르겠지만 두려워했던 기능이다.

익숙하지 않아서 그랬던 듯(사실 지금도 그렇긴 함)

 

 

 

 

상자를 스크롤 해보세요.

 

Progress Bar

BOX-01

BOX-02

BOX-03

BOX-04

 

 

 

 

 

 

코드

<!-- css -->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    header {
        position: relative;
        width: 300px;
        height: 50px;
        color: #000;
        line-height: 46px;
        font-size: 30px;
        background-color: rgba(255, 255, 255, 0.5);
        border-bottom: 4px solid #fff;
    }

    .progressBar {
        position: absolute;
        bottom: -4px;
        width: 0%;
        height: 4px;
        background-color: #000;
        transition: all 2s;
    }

    #wrap {
        width: 300px;
        height: 300px;
        overflow: hidden;
        overflow-y: auto;
    }

    .box {
        width: 100%;
        height: 300px;
        text-align: center;
        line-height: 300px;
    }

    .box1 {
    	background-color: #e1f6fa;
    }

    .box2 {
    	background-color: #ffffc7;
    }

    .box3 {
    	background-color: #ffd1c8;
    }

    .box4 {
    	background-color: #e5dfff;
    }
</style>


<!-- html -->
<header>
    <nav class="nav">Progress Bar</nav>
    <span class="progressBar"></span>
</header>

<section id="wrap">
    <div class="box box1">BOX-01</div>
    <div class="box box2">BOX-02</div>
    <div class="box box3">BOX-03</div>
    <div class="box box4">BOX-04</div>
</section>


<!-- js -->
<script>
    var sectionBox = document.querySelector('#wrap');

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

        // 프로그래스바(길게 쓰면 불편해서 변수에 담았음)
        const progressBar = document.querySelector('.progressBar');

        // 스크롤 해서 나오는 위치값(wrap 박스 스크롤 했을때임)
        const currentScrollValue = sectionBox.scrollTop;

        // 화면에 보이는 박스 높이값(실질적인 높이가 아니라 육안으로만 보이는 부분)
        const viewBoxHeight = sectionBox.clientHeight;

        // 실제 박스의 높이
        const sectionBoxHeight = sectionBox.scrollHeight;

        // 현재 스크롤 위치를 퍼센트값으로 변환하기
        const currentPercent = currentScrollValue / (sectionBoxHeight - viewBoxHeight) * 100;

        // 현재 스크롤 위치를 퍼센트값으로 변환한걸 프로그래스바 width에 적용함
        progressBar.style.width = currentPercent + '%';

        console.log(currentScrollValue);
    });
</script>

 

 

 

scroll 문법

 

• 스크롤바를 위에서 부터 얼마나 내린건지 px단위로 알려줌
  * 단, scrollY는 window에만 붙일 수 있음 (현재 페이지를 얼만큼 내렸는가)
  window.scrollY;
  window.pageYOffset;
  
  
  
• x, y 에 입력한 위치로 스크롤 강제 고정함(사용자가 스크롤 이동해도 안 움직임)
  window.scrollTo(x, y);
  
  
  
• 현재 스크롤 위치에서 계속 강제로 +px 함
  window.scrollBy(x, y);
  예) window.scrollBy(0, 100);  // 현재 위치에서 부터 계속 +100px 만큼 강제로 이동함.
  
  
  
• 스크롤바를 위에서 부터 얼마나 내린건지 위치값 알려줌(일반 div 와 같은 태그에 붙일 수 있음)
  셀렉터.scrollTop;
  
  
  
• 화면에 보이는 박스 높이값(실질적인 스크롤박스의 높이값이 아니라 육안으로만 보이는 박스 높이값)
  셀렉터.clientHeight;
  
  
  
• 실제 스크롤 박스의 높이값
  셀렉터.scrollHeight;
  
  
  
• 제이쿼리로 스크롤 위치 표시 / 강제 이동하기 (scrollY랑 비슷)
  $(window).scrollTop();  // 현재 위치값 알려줌(콘솔로 확인 가능)
  $(window).scrollTop(100);  // 100px 위치로 강제 이동
  
  
  
• 브라우저의 현재 높이(주소 표시창 포함X)
  window.innerHeight;