페이지 스크롤 진행률을 표시해 보자 - 상단 progress-bar 만들기
이전 2개의 포스팅에서 이벤트 리스너를 달고, scroll을 감지하는 내용을 배우고 정리해 보았습니다. 이런 것들은 배우고 익혀서 대체 어디에 써먹을 수 있을까요?
웹사이트를 서핑하다 보면, 이렇게 페이지 상단에 프로그래스 바를 만들어 두고 본문을 얼마큼 읽었는지 표시해 주는 UI를 만나는 경우가 있습니다. 왠지, 스크롤 전체 높이를 알고, 현재 스크롤한 값을 알 수만 있다면 Javascript로 구현을 할 수 있겠다는 생각이 들지 않은가요?
scroll 이벤트를 배웠으니, 당장 써먹어 보도록 합니다.
세로 높이가 긴 문서 준비
예제로 활용할 HTML 문서는 다음과 같이 만들어봤습니다.
VSCode에서 lorem * 500 정도 주고 tab 키를 누르면 더미 TEXT를 만들 수 있습니다.
대충 요정도 코드로 만든 html 문서를 활용해보록 해보겠습니다.
<style>
.container {
position: fixed;
top: 10px;
height: 50px;
width: 100%;
}
.progress-bar {
width: 0;
height: 10px;
background-color: blue;
}
#veryLongText {
padding-top: 50px;
}
</style>
<body>
<div class="container">
<div class="progress-bar"></div>
</div>
<div id="veryLongText">
lorem*500 <!-- 500 뒤에서 tab 키를 눌러서 더미 TEXT를 만들어주세요 -->
</div>
</body>
스크롤 이벤트 감지하기
스크롤 이벤트를 감지하기 위해서는 addEventListener를 달아줘야겠죠? 어디에 다는 게 좋을까요?
문서 전체를 스크롤할 거니까, 더미 text가 있는 div 보다는 window에 달아주는 게 낫겠죠?
<script>
window.addEventListener("scroll", function () {
const scrollTop = document.querySelector("html").scrollTop;
const scrollHeight = document.querySelector("html").scrollHeight;
const clientHeight = document.querySelector("html").clientHeight;
console.log("scrollTop: ", scrollTop);
console.log("clientHeight: ", clientHeight);
console.log("scrollHeight: ", scrollHeight);
});
</script>
본문 위에서 마우스로 휠버튼을 돌려 스크롤을 해보면, html 태그를 기준으로 scrollTop, clientHeight, scrollHeight가 잘 찍히는 것을 확인할 수 있습니다.
아래 내용은 이전 포스팅에서 정리했었습니다,
scrollTop의 최댓값 + clientHeight = scrollHeight
JS로 CSS 조작하기
위에서 확보한 scroll 관련한 값들을 계산을 해준 이후에, 아래 CSS에 적용을 해주면 되지 않을까요?
.progress-bar {
width: 0; // 현재 가로폭이 0% 니까, 세로 스크롤이 50%라면 이 숫자를 50%로 바꿔주면?
height: 10px;
background-color: blue;
}
JS 코드를 다음과 같이 작성해 봅니다.
<script>
window.addEventListener("scroll", function () {
const scrollTop = document.querySelector("html").scrollTop;
const scrollHeight = document.querySelector("html").scrollHeight;
const clientHeight = document.querySelector("html").clientHeight;
console.log("scrollTop: ", scrollTop);
console.log("clientHeight: ", clientHeight);
console.log("scrollHeight: ", scrollHeight);
// 아래 수식은 전체 세로폭 중 현재까지 스크롤한 값을 백분률 환산
// 브라우저 최하단까지 스크롤을 내리면 100%가 됩니다.
const progress = ((scrollTop + clientHeight) / scrollHeight) * 100;
// 위에서 얻은 progress 값을 div.progress-bar의 width에 써줍니다.
document.querySelector(".progress-bar").style.width = progress + "%";
});
</script>
백분율 환산식은 초등학교 산수.
현재 진행범위를 전체 범위로 나눠서 x100 했습니다.(때마침 width는 % 단위를 쓰고 있으니까요.)
브라우저에서 실행해 보면, 요렇게 최초 실행이 됩니다.
본문 위에 마우스를 두고 스크롤 다운을 해보면,
이런 모습으로 상단에서 progress-bar가 스크롤할 때마다 실시간으로 우측으로 채워져 나갑니다.
문서 최하단까지 스크롤되어, 100%로 채워진 모습입니다.
마우스 휠을 위로 올려서 스크롤 업을 해보면, progress-bar는 다시 비율대로 줄어듭니다.
스크롤 높이에 반응하는 프로그레스 바를 간단하게 구현해 보았습니다.
마치며
저 또한 지금까지는 마우스 휠 이벤트를 사용할 일이 크게 없었더래서 눈대중으로 대충 동작원리만 파악하고 있었던 영역이었는데요, 이전 2개의 포스팅에서 scroll 이벤트들을 이해하면서 정리하고 났더니, 직접 코드를 작성하는 데 10분도 걸리지 않았습니다.
구글링을 해서 다른 사람이 작성한 코드를 가져다가 사용하는 것도 좋지만, 간단한 것들은 후다닥 스스로 만들어서 사용하는 것도 좋겠습니다. 만들 줄 알면, 다른 사람의 코드들을 가져다 사용하는 것도 매우 손쉬울 것이겠구요.
이렇게 scroll 이벤트를 활용하기 시작하면, Front-end에서는 하고 싶은 것들을 정말 많이 할 수 있는 것 같습니다. 전통적인 웹 제작방식에 있어서, Back-end 개발자들이 크게 관심을 두고 있지 않은 영역이기도 하구요.
조금 복잡한 느낌이 들어도, 이전에 작성한 포스팅들을 참고하시고 꼭 한번 scroll 이벤트를 내 것으로 만들어 두시기 바랍니다. 코딩 활용 근육이 한층 더 성장하게 되는 순간을 만나게 될 것입니다.
오늘도 즐거운 코딩 하세요~
즐거운 코딩생활, 즐코딩.
KINcoding.
'Javascript' 카테고리의 다른 글
| Client-side 렌더링 vs. Server-side 렌더링 ? CSR, SSR (0) | 2023.02.14 |
|---|---|
| float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현 (0) | 2023.02.13 |
| 마우스 wheel 동작 이벤트 및 감지 - Part 2 : scrollTop, scrollHeight, clientHeight (0) | 2023.02.10 |
| 마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이? (0) | 2023.02.09 |
| 소수점 계산 시 정확한 계산 결과를 위한 적용 방법 (0) | 2023.02.08 |
댓글