넘치게 채우기

VanilaJS - 스크롤 진행 바 만들기 본문

개발/Frontend

VanilaJS - 스크롤 진행 바 만들기

riveroverflow 2024. 1. 11. 18:22
728x90
반응형

자바스크립트를 이용하여 스크롤 진행 바를 만들어보자.

스크롤바 사진 예시

 

 

스크롤의 진행을 위해서는, 지금까지 내려온 스크롤의 길이, 웹 페이지 전체의 세로길이, 화면의 길이가 필요하다.

  • Document.body.of.offsetHeight - 웹 페이지의 <body>태그의 총 높이를 구한다.
  • Document.body.of.offsetWidth - 웹 페이지의 <body>태그의 총 길이를 구한다.
  • window.scrollY - 웹 페이지에서 스크롤해서 내려온 세로축의 길이. 맨 위에서 window의 맨 윗부분까지의 거리이다.
  • window.scrollX - 웹 페이지에서 스크롤해서 오른쪽으로 이동한 가로축의 길이. 맨 왼쪽에서 window의 맨 왼쪽부분까지의 거리이다.
  • window.innerHeight - 브라우저에서 웹 페이지를 보여주는 영역의 높이
  • window.innerWidth - 브라우저에서 웹 페이지를 보여주는 영역의 너비
  • window.outerHeight - 브라우저 전체 영역의 높이
  • window.outerWidth - 브라우저 전체 영역의 너비

 

 

스크롤 진행률 구하기

스크롤 진행률을 어떻게 구할 수 있을까?

맨 아래로 내렸을 때의 scrollY는 Document.body.of.offsetHeight - window.innerHeight이다.

scrollY가 window의 맨 위까지의 거리이기 때문이다.

 

스크롤 진행률은 scrollY / (Document.body.of.offsetHeight - window.innerHeight)라고 정의할 수 있다.

 

 

진행 바 만들기

body의 맨 위에 두 개의 div를 넣는다.

loader-container 안에 loader가 들어가있도록 만든다.

<div id="loader-container">
    <div id="loader"></div>
</div>

 

 

스타일도 넣어준다.

맨 위에 있어야 하므로 위치를 고정시켜주고, 너비를 최대로 설정했다. 높이는 적당히 얇게 해주면 된다.

#loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #F3F8FF;
    z-index: 1001;
}

#loader {
    height: 100%;
    width: 0;
    background-color: #92C7CF;
}

 

 

 

진행 바 업데이트 시키기

window객체에 이벤트리스너를 추가한다.

조건을 '스크롤 시'로 설정하고,

스크롤 시에 퍼센트를 업데이트하여 loader 요소를 찾아서 너비를 조정하는 방식으로 했다.

function getScrollPercent() {
	return ((window.scrollY / (document.body.offsetHeight - window.innerHeight)).toFixed(2)) * 100;
}

window.addEventListener('scroll', () => {
	const percent = getScrollPercent();

	const loader = document.getElementById('loader');
	loader.style.width = `${percent}%`;
});

 

728x90
반응형
저작자표시 비영리 변경금지

'개발 > Frontend' 카테고리의 다른 글

페이지 내에서 소제목들을 기준으로 하이퍼링크 기능 만들기(fragment, javascript)  (0) 2024.01.12
URI인코딩 풀기(javascript)  (0) 2024.01.10
'개발/Frontend' Related Articles more