Scroll Indicator

목표

scrollTop / scrollHeight / clientHeight 에 관해서 잘 알자

 

<header>
    <div class="container">
        <h1>Hello World</h1>
    </div>

    <div id="scroll-bar"></div>
</header>

<main id="content" class="container">
	<p>......</p>
</main>

 

첫 번째 방법

 

width를 활용

const scrollBar = document.getElementById('scroll-bar');

// 첫 번째 방법 (1) : width 크기를 변경

window.addEventListener('scroll', function () {
    // Write JS Code Here!
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 문서 전체 높이
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    // 화면의 높이
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // 실제 남은 길이
    const contentHeight = scrollHeight - clientHeight;
    const percent = (scrollTop / contentHeight) * 100;
    scrollBar.style.width = `${percent}%`
})

 

두 번째 방법

 

translate를 활용

        #scroll-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background-color: blue;

            /* 두 번째 방법 */
            width: 100%;
            transform : translateX(-100%);
        }

 

const scrollBar = document.getElementById('scroll-bar');
// 두 번째 방법 (2) : translateX 활용

window.addEventListener('scroll', function () {
    // Write JS Code Here!
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 문서 전체 높이
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    // 화면의 높이
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // 실제 남은 길이
    const contentHeight = scrollHeight - clientHeight;
    const percent = (scrollTop / contentHeight) * 100;
    scrollBar.style.transform = `translateX(-${100 - percent}%)`;
    scrollBar.style.transition = `transform 0.3 ease-out`;
})