본문 바로가기
WEB Basic/JavaScript

[JavaScript] 스크롤 위치에 따라 상단 프로그래스 바 구현하기

by Devinus 2024. 1. 19.

1. 구현 결과 미리보기

top progress bar

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos maiores ut exercitationem illo aperiam molestias nesciunt vitae, voluptatem magnam.

 

2. 분석

웹 페이지에서 스크롤 위치에 따라 상단에 나타나는 프로그래스 바를 구현하는 방법을 알아보겠습니다. 이 기능은 사용자에게 페이지 스크롤의 진행 상태를 시각적으로 표시하여 사용성을 향상시킬 수 있습니다.</span >

스크롤 프로그래스바를 적용하면 얻을 수 있는 이점

  1. 시각적 피드백:
    • 로딩 및 스크롤 중에 프로그래스 바를 통해 현재 진행 중인 작업을 시각적으로 알 수 있습니다.
  2. 진행 상태 시각화:
    • 페이지 스크롤 위치를 표현하여 사용자에게 현재 위치 및 전체 콘텐츠 양을 시각적으로 제시합니다.
  3. 사용자 참여 유도:
    • 스크롤 시 프로그래스 바의 업데이트로 사용자를 더 많은 스크롤로 유도하며, 새로운 콘텐츠에 호기심을 유발합니다.
  4. 페이지 떠나지 않도록 유도:
    • 사용자는 프로그래스 바의 변화를 지켜보며 페이지를 떠나지 않도록 유도되어, 더 오래 머무르도록 할 수 있습니다. 이는 사용자가 페이지에 머무르면서 추가 정보를 찾거나 상호 작용할 가능성을 높입니다.

 

코드 적용 기준

스크롤 되는 기준이 window인지, 특정 container element인지에 따라서 적용하는 코드가 달라집니다.

 

1. window가 스크롤되는 경우

 // 프로그래스 바 엘리먼트
const progressBar = document.getElementById("myBar");

/**
 * window 객체가 스크롤될 경우
 */
// window 스크롤 이벤트 감지 및 콜백 셋팅
window.addEventListener("scroll", function () {
  // window의 스크롤 진행도 계산
  const scrollHeight =
    document.documentElement.scrollHeight - window.innerHeight;
  const scrolled = (window.scrollY / scrollHeight) * 100;

  // 계산된 스크롤 진행도를 CSS로 표현
  progressBar.style.width = scrolled + "%";
});

 

2. 특정 container element가 스크롤되는 경우

 // 프로그래스 바 엘리먼트
const progressBar = document.getElementById("myBar");

/**
 * container element가 스크롤될 경우
 */
const container = document.getElementById("scrollContainer");

// container element 스크롤 이벤트 감지 및 콜백 셋팅
container.addEventListener("scroll", function () {
  // 컨테이너의 스크롤 진행도 계산
  const scrollHeight = container.scrollHeight - container.clientHeight;
  const scrolled = (container.scrollTop / scrollHeight) * 100;

  // 계산된 스크롤 진행도를 CSS로 표현
  progressBar.style.width = scrolled + "%";
});

 

3. 구현 (window를 기준으로 작성)

3.1. html

  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
  <div class="content">
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
      nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
      maiores ut exercitationem illo aperiam molestias nesciunt vitae,
      voluptatem magnam.
    </p>
  </div>

3.2. css

  .progress-container {
    width: 100%;
    /* 프로그래스 배경 색상 */
    background-color: #fe7a3622;
    /* 상단에 위치하기 위함 */
    position: fixed;
    top: 0;
    z-index: 1;
  }

  .progress-bar {
    /* 프로그래스바 높이 */
    height: 5px;
    /* 프로그래스바 색상 */
    background-color: #fe7a36;
    width: 0;
    transition: 0.15s;
  }

3.3. js

/* DOM이 로드 됐을 때 실행되는 함수 */
document.addEventListener("DOMContentLoaded", function () {
    // 프로그래스 바 엘리먼트
    const progressBar = document.getElementById("myBar");

    /**
     * window 객체가 스크롤될 경우
     */
    // window 스크롤 이벤트 감지 및 콜백 셋팅
    window.addEventListener("scroll", function () {
      // window의 스크롤 진행도 계산
      const scrollHeight =
        document.documentElement.scrollHeight - window.innerHeight;
      const scrolled = (window.scrollY / scrollHeight) * 100;

      // 계산된 스크롤 진행도를 CSS로 표현
      progressBar.style.width = scrolled + "%";
    });
});

3.4. 전체 코드

더보기 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>top progress bar</title>
    <style>
      .progress-container {
        width: 100%;
        /* 프로그래스 배경 색상 */
        background-color: #fe7a3622;
        /* 상단에 위치하기 위함 */
        position: sticky;
        top: 0;
        z-index: 1;
      }

      .progress-bar {
        /* 프로그래스바 높이 */
        height: 5px;
        /* 프로그래스바 색상 */
        background-color: #fe7a36;
        width: 0;
        transition: 0.15s;
      }
    </style>
  </head>
  <body>

      <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
      </div>
      <div class="content">
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione a
          nesciunt hic, aspernatur voluptate atque ut. Ab omnis quam, eos
          maiores ut exercitationem illo aperiam molestias nesciunt vitae,
          voluptatem magnam.
        </p>
      </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 프로그래스 바 엘리먼트
        const progressBar = document.getElementById("myBar");

        /**
         * window 객체가 스크롤될 경우
         */
        // window 스크롤 이벤트 감지 및 콜백 셋팅
        window.addEventListener("scroll", function () {
          // window의 스크롤 진행도 계산
          const scrollHeight =
            document.documentElement.scrollHeight - window.innerHeight;
          const scrolled = (window.scrollY / scrollHeight) * 100;

          // 계산된 스크롤 진행도를 CSS로 표현
          progressBar.style.width = scrolled + "%";
        });
      });
    </script>
  </body>
</html>
저작자표시 비영리 변경금지

관련글

티스토리툴바