자바스크립트로 페이지 스크롤 인디케이터 구현하기
긴 페이지를 스크롤해서 움직일 때 페이지 어디쯤에 위치해있는지 알려주는 기능을 하는 페이지 스크롤 인디케이터가 있으면 방문자가 페이지 내용을 탐색하는데 많은 도움이 됩니다.
데스크톱 환경에서는 고정 위치에 스크롤바가 있기 때문에 대략의 위치를 파악하는 것이 어렵지 않지만, 모바일 웹 환경에서는 스크롤바가 스크롤하는 시점에만 보이고 사라지기 때문에 이런 스크롤 인디케이터가 고정 위치에 표시되는 것이 페이지 정보 파악에 도움이 됩니다.
문서 중심의 사이트, 긴 내용을 표시하는 페이지가 많은 사이트는 이런 스크롤 인디케이터가 특히 도움이 됩니다.
구현은 비교적 간단합니다.
HTML과 CSS로 간단한 프로그래스 바를 하나 만들고, 자바스크립트로 스크롤 이벤트 처리를 해서 프로그래스 바 크기를 조절해주기만 하면 됩니다.
먼저 HTML 페이지를 만듭니다.
스크롤 인디케이터는 특히 모바일웹에서 중요하기 때문에 데스크톱 환경과 공용으로 사용할 수 있게 페이지 맨 위에 고정 위치로 표시를 합니다.
CSS는 분량이 얼마 안되기 때문에 인라인으로 HTML 상단에 작성했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스크롤 인디케ㅣ터 어포스트 - 2021-06-05</title>
<script type="text/javascript" src="./scrollindicator.js"></script>
<style>
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content{
width: 100%;
height: 3000px; /* 스크롤바가 생기도록 강제로 가상 컨텐츠 높이 생성 */
background-color: #fafafa;
}
/* 프로그래스바 */
.progressbar {
position: fixed; /* 페이지 상단에 프로그레스바 고정 */
height: 2px;
top: 0;
left: 0;
width: 100%;
z-index: 500;
}
.progressbar > .progress {
width: 0%; /* 프로그래스바 진행 정도 */
height: 100%;
transition: width 0.3s ease; /* 부드러운 가속도 애니메이션 추가 */
background-color: #a00;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content"></div>
<div id="progressbar" class="progressbar"><div class="progress"></div></div>
</div>
</body>
</html>- 가상으로 3000px짜리 긴 페이지가 있다고 하고 ".content" 클래스에 높이로 3000px를 줍니다.
- 스크롤 인디케이터를 구현은 ".progressbar" 클래스로 합니다. 페이지 최상단에 항당 고정(position: fixed;) 해서 높이를 2px로 부여합니다.
- 실제 진행도를 표시하는 프로그래스바는 ".progress" 클래스로 표현합니다. 자바스크립트로 이 "<div>" 태그를 제어하게 됩니다. ".progressbar"는 웹브라우저 영역 100%를 항상 채워서(width: 100%;) 프로그래스 바의 래퍼 역할을 합니다.
프로그래스 바가 부드럽게 애니메이션 되도록 효과(transition: width 0.3s ease)를 추가합니다.
"ease" 속성은 가속도를 부여하는 속성으로 프로그래스 바가 조금 더 자연스럽게 크기 조절이 되도록 합니다.
완성한 페이지를 웹 브라우저에서 열어보면 아무것도 안보입니다.
프로그래스 바 너비를 다음과 같이 약간 변경해서 프로그래스 바가 실제로 표시되는지 확인해봅니다.
프로그래스 바는 자바스크립트로 너비 값을 계산할 때 전체 높이를 기준으로 퍼센트 비율로 너비를 계산해 표시합니다.
따라서 프로그래스바의 너비 값 단위는 "%"로 단위를 표시해야 합니다.
.progressbar > .progress {
width: 45%; /* 프로그래스바 값을 강제로 지정해서 진행된 상태를 확인 */
height: 100%;
transition: width 0.3s ease;
background-color: #a00;
}45% 정도 진행된 프로그래스바가 표시되면 이제 자바스크립트로 이벤트 처리만 하면 됩니다.
자바스크립트 코드는 다음과 같습니다.
간단합니다.
상단은 DOM 로딩 후 "scroll" 이벤트가 발생하면 "setProgress()" 함수를 호출하는 기본적인 자바스크립트 코드입니다.
실제 프로그래스바의 처리는 "setProgress()" 함수가 처리합니다.
setProgress() 함수에 대해서 알아보겠습니다.
변수 2개의 값이 중요합니다.
"currY" 변수는 현재 뷰포트 상단 Y 좌표입니다.
"totalY"는 전체 콘텐츠 높이에서 현재 웹브라우저 뷰포트 영역 높이를 뺀 값입니다. 기준 Y 좌표가 뷰포트 상단 Y 좌표이기 때문에 맨 아래로 스크롤했을 때 프로그래스 바가 100%가 되려면 전체 콘텐츠 높이에서 현재 뷰포트 높이만큼을 빼줘야 합니다.
"percentage"는 스크롤한 높이 / 전체 높이 * 100을 해서 스크롤 한 퍼센트 값을 구한 것입니다.
window.addEventListener('DOMContentLoaded', function(){
//스크롤 이벤트 처리
window.addEventListener("scroll", function(event){
if(document.querySelector('.progressbar') != null)setProgress();
});
});
function setProgress() {
let currY = document.documentElement.scrollTop;//스크롤한 높이
let totalY = document.documentElement.scrollHeight - document.documentElement.clientHeight;//전체 높이
let percentage = (currY / totalY) * 100;//퍼센트 값
document.querySelector(".progress").style.width = percentage + "%";//프로그래스바 너비 변경
}실제 웹페이지에 적용하면 다음처럼 프로그래스 바가 표시되면서 웹페이지를 스크롤한 정도를 알려주는 기능을 합니다.
완성된 소스는 다음 링크를 클릭해 다운로드할 수 있습니다.