📶 스크롤 진행률 가이드 | 지금 몇 %까지 왔을까?

문서 전체 높이 scrollHeight (px)

뷰포트 높이 clientHeight (px)

현재 스크롤 위치 scrollTop (px, 0 = 맨 위)

진행바 컨테이너 폭 (px, 선택 · 비우면 계산 생략)

스크롤 진행률은 무엇으로 나눌까

스크롤 진행률 인디케이터는 글을 어디까지 읽었는지 알려 주는 얇은 막대입니다. 핵심은 분모를 무엇으로 두느냐인데, 문서 전체 높이가 아니라 실제로 스크롤할 수 있는 거리로 나눠야 맨 아래에서 정확히 100 %가 됩니다. 세 값만 넣으면 진행률과 진행바 채움 폭이 바로 나오고, 분모를 잘못 뒀을 때 생기는 오차도 함께 보여 줍니다.

계산 방식

스크롤 가능 거리 = scrollHeight − clientHeight, 진행률 = scrollTop ÷ 스크롤 가능 거리 × 100 이며 0 %와 100 % 사이로 자릅니다. 문서 높이로 나누는 식의 최대 진행률은 (scrollHeight − clientHeight) ÷ scrollHeight × 100 으로, 뷰포트가 차지하는 비율만큼 모자라게 됩니다. 값은 소수 1자리로 표시하고 판정도 같은 자리수로 합니다.

한계와 접근성

2026년 10월 기준 진행바의 권장 두께·색·위치에 대한 공인 기준은 없어 이 도구는 제시하지 않습니다. 주소창 높이 변화, 이미지 지연 로딩으로 문서 높이가 바뀌는 상황, 스크롤 스냅은 계산에 넣지 않습니다. 진행바에 애니메이션을 넣는다면 prefers-reduced-motion 을 존중하세요.

자주 묻는 질문

왜 문서 높이로 나누면 안 되나요?

뷰포트에 보이는 만큼은 스크롤하지 않아도 이미 읽은 영역이기 때문입니다. 문서 높이로 나누면 끝까지 내려도 100 %에 닿지 못하고, 결과에 표시된 최대 진행률에서 멈춥니다.

진행바 두께나 색은 얼마가 좋은가요?

공인된 권장 두께·색 기준이 없어 이 도구는 값을 제시하지 않습니다. 다만 진행바도 그래픽 요소이므로 배경과 충분히 구분되는 대비를 확보하세요.

가로 스크롤에도 쓸 수 있나요?

식은 같습니다. 높이 대신 scrollWidth 와 clientWidth, scrollLeft 를 넣으면 같은 방식으로 가로 진행률이 나옵니다.

📶스크롤 진행률 인디케이터 가이드

관련된 도구

CSS scroll-snap 코드 생성기

CSS 커스텀 스크롤바 코드 생성기

스크롤 진행률은 무엇으로 나눌까

계산 방식

한계와 접근성

자주 묻는 질문

관련된 도구

CSS scroll-snap 코드 생성기

CSS 커스텀 스크롤바 코드 생성기

스크롤 진행률은 무엇으로 나눌까

계산 방식

한계와 접근성

자주 묻는 질문

같은 카테고리 도구