스크롤 이벤트 발생 시 스크롤 진척도 표시

티스토리 뷰

Javascript

스크롤 이벤트 발생 시 스크롤 진척도 표시

developer jungminji 2024. 7. 19. 03:18

스크롤을 내리면 상단에 스크롤 진척도 효과가 나타나는 것을 본 적이 있을 거다. 나는 주로 브런치에서 많이 봤다.

팀 프로젝트에서 해당 기능을 구현하기로했다. 내가 맡은 기능은 아니지만 구현해보고싶어서 따로 공부하는 시간을 가졌다. 여기서 중요한 것은 '스크롤 진척도 구현하는 법' 검색해서 따라하는 것 말고 키워드 중심으로 검색해서 스스로 만들고 다른 사람이 구현한 코드와 비교해보는 것!!⭐️

코드

HTML

<div class="bar"></div> /* 막대바 */
<div class="box"></div> /* 화면 높이를 늘리기 위해 추가 */

CSS

body {
  margin: 0;
}

.bar {
  position: fixed;
  background-color: orange;
  height: 30px;
}

.box {
  font-size: 40px;
  height: 3000px;
}

Javascript

  const bar = document.querySelector(".bar");

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

    bar.style.width = scrollPercentage + "%";
  });

설명

구현 방법

첫번째로 생각한 방법은 화면 높이 전체를 구하고, 그 높이만큼 비슷하게 진척도 너비를 늘리면 되지 않을까? 라고 생각을 했지만.. 브라우저 크기가 고정적인 것도 아니고.. 뭔가 복잡한 계산이 있어야할 것 같아서 좀 더 간단한 방법을 생각했다.

바로 스크롤 내린 비율 만큼 너비도 같은 비율로 늘리는 것이다. 즉, 스크롤 전체 높이중에서 스크롤 내릴 비율을 구하고 화면 전체 너비에서 구한 비율만큼 막대를 늘리는 것이다.

코드 설명

window.scrollY
- 브라우저 창의 뷰포트 상단에서 문서 상단까지의 수직 거리
- 대부분의 현대 브라우저에서 지원
- window.pageYOffset과 동일
document.documentElement.scrollTop
- HTML 문서의 <html> 요소에 대한 스크롤 위치를 나타냄
- 주로 오래된 브라우저에서 window.scrollY를 지원하지 않을 때 사용되는 대체 방법
- window.scrollY가 더 권장되긴함

window.scrollY 와 document.documentElement.scrollTop 모두 브라우저에서 현재 스크롤 위치(얼마나 스크롤 했는지)를 픽셀 단위로 알려준다. || 연산자를 사용해서 같이 쓴 이유는 스크립트의 호환성을 최대화하기 위해 두 속성을 조합하기도 한다고 해서 사용했다.

document.documentElement.scrollHeight
- HTML 문서의 전체 높이 (문서의 모든 콘텐츠를 포함하여 스크롤이 가능한 영역의 전체 높이)
- 중요한 것은!! 문서의 내용이 길어서 스크롤이 필요한 경우, 이 값은 스크롤바를 포함한 문서의 전체 높이를 반환

window.innerHeight
- 브라우저 창(뷰포트)의 높이 (현재 화면에 보이는 부분의 높이)

document.documentElement.scrollHeight - window.innerHeight 의 계산식이 있는 이유는 스크롤 가능한 높이를 알아야하기 때문이다. 스크롤 가능한 영역은 document.documentElement.scrollHeight 가 아니고 document.documentElement.scrollHeight(문서 전체 높이) 에서 에서 현재 보이는 뷰포트 높이를 뺀 값이다. 왜냐하면, 뷰포트 내에서 현재 보이는 부분은 스크롤할 필요가 없기 때문!! (처음에 이 개념이 이해가 안갔음ㅜ🤯)

스크롤 가능한 영역을 구했으면, 스크롤 한 영역과 계산식을 통해 얼마나 내렸는지 비율을 구할 수 있다.

bar.style.width = scrollPercentage + "%" : 그 비율만큼 막대바 너비도 늘려주면 끝!

완성

내가 구현한 방식이 완벽한 방식은 아닐지라도 우선.. 혼자서 해본게 뿌듯 🌝 이제 다른 사람은 어떻게 구현했는지 비교해봐야겠다😏

'Javascript' 카테고리의 다른 글

[Javascript] let/const/ var (0)	2024.07.29
Promise (0)	2024.07.24
스크롤 특정 영역 감지 (0)	2024.07.17
버튼 클릭시 스크롤 맨 위로 이동 (1)	2024.07.16
[Javascript] 변수 선언 시 메모리 할당 과정 (0)	2024.04.27

최근에 올라온 글

Total

Today

Yesterday

링크

Minji Log

티스토리 뷰