📊 스크롤 퍼센트 기반 프로그레스 바 만들기 – 바닐라 JS로 구현하는 실전 UI

 

 

 

웹사이트를 읽다 보면 상단에 얇은 바가 스르륵 차오르는 걸 본 적 있으신가요?

이건 바로 스크롤 퍼센트 기반 프로그레스 바(progress bar)입니다.

 

사용자가 페이지를 얼마나 읽었는지 직관적으로 보여주는 UI로,

사용자 경험(UX)을 높이는 데 효과적이에요.

 

이번 글에서는 라이브러리 없이 바닐라 JavaScript만으로

이 기능을 구현하는 방법을 소개합니다.

 

🎯 구현 목표

• 사용자가 스크롤한 비율에 따라 상단 바의 너비가 실시간으로 변함
• HTML, CSS, JavaScript만 사용
• 반응형 웹에서도 자연스럽게 작동

 

🧩 HTML 구조

 

<div class="progress-container">
  <div class="progress-bar"></div>
</div>

• progress-container: 전체 프로그레스 바 영역
• progress-bar: 실제 너비가 변하는 바 요소

 

🎨 CSS 스타일링

 

.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #eee;
  z-index: 9999;
}

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

• 상단에 고정되도록 position: fixed 사용
• transition으로 부드러운 너비 변화 효과 적용

 

⚙️ JavaScript 로직

 

window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;

  const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
  document.querySelector(".progress-bar").style.width = scrollPercent + "%";
});

• scrollTop: 현재 스크롤 위치
• scrollHeight: 전체 문서 높이
• clientHeight: 화면 높이
• 계산된 scrollPercent를 바 너비로 반영

 

💡 확장 아이디어

• 색상 변경: 스크롤 위치에 따라 색상 변화
• 섹션별 진행률: 특정 섹션마다 별도 바 표시
• 성능 최적화: throttle 또는 requestAnimationFrame 활용

 

🧾 마무리

 

스크롤 퍼센트 기반 프로그레스 바는 단순하지만

사용자에게 읽기 진행률을 직관적으로 보여주는 훌륭한 UI입니다.

 

라이브러리 없이도 충분히 구현 가능하며,

다양한 확장 기능으로 UX를 더욱 향상시킬 수 있어요.

 

이제 여러분의 블로그나 프로젝트에 직접 적용해보세요!

다음 글에서는 다크 모드 토글 기능을 소개할 예정이니 기대해주세요. 😄