스크롤 프로그레스바

스크롤 프로그레스바

HTML, CSS, JavaScript를 활용하여 웹 페이지의 스크롤 진행률을 시각적으로 표시하는 프로그레스바를 만드는 방법에 대해 알아봅니다.

목차

• 개요
• HTML 구조
• CSS 스타일
• JavaScript 로직
• 기능 예제

개요

스크롤 프로그레스바는 사용자가 웹 페이지를 얼마나 읽었는지 직관적으로 보여주어 사용자 경험을 향상시키는 데 효과적인 기능입니다. 이 기능은 페이지 상단에 위치하며, 스크롤에 따라 너비가 동적으로 변하는 막대 형태로 구현됩니다.

참고

이 기능은 HTML, CSS, JavaScript의 기본 기능을 활용하며, 별도의 라이브러리 없이 구현할 수 있습니다.

HTML 구조

프로그레스바는 일반적으로 페이지 최상단에 위치하며, 전체 너비를 차지하는 컨테이너와 실제 진행률을 나타내는 내부 막대 두 개의 div 요소로 구성됩니다.

HTML

<div class="scroll-progress-container">
  <div id="Bar" class="scroll-progress-bar"></div>
</div>

CSS 스타일

CSS를 사용하여 프로그레스바가 화면 상단에 고정되도록 하고, 시각적인 디자인을 적용합니다.
position: fixed를 통해 스크롤 시에도 위치가 변하지 않도록 설정합니다.
.scroll-progress-bar의 속성인 background-color의 값을 바꿔 프로그래스바의 진행도 색상을 바꿀수 있습니다.
.scroll-progress-container의 속성인 height의 값을 바꿔 프로그래스바의 높이를 설정 할 수 있습니다.

CSS

.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background-color: #3eaf7c;
  transition: width 0.1s ease-out;
}

JavaScript 로직

JavaScript로 스크롤 이벤트를 감지하여 현재 스크롤 위치를 계산하고, 이를 백분율로 환산하여 프로그레스바의 width에 적용합니다. DOMContentLoaded 이벤트 리스너를 사용하여 문서 로드 후 코드가 실행되도록 합니다.

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const progressBar = document.getElementById("Bar");

  window.addEventListener("scroll", function () {
    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrolled = (window.scrollY / scrollHeight) * 100;

    progressBar.style.width = scrolled + "%";
  });
});

기능 예제