자바스크립트 현재의 스크롤바 위치 가져오는 방법

🖱자바스크립트 현재의 스크롤바 위치 가져오는 방법

안녕하세요 TriplexLab입니다.
오늘은 자바스크립트 현재의 스크롤바 위치 가져오는 방법에 관해서 살펴보도록 하겠습니다.

👉만들어볼 예제

잠깐 하단의 영상을 봐주세요 👉유튜브 영상[링크참고]

영상을 보시면 아시겠지만 브라우저 스크롤 위치에 맞게 파란 바가 같이 채워지는 모습을 확인할 수 있습니다.
이것은 생각보다 간단해요. 😃 😃

👉 소스코드 정리

(function() {
	const $ = (ele) => document.querySelector(ele)
	let maxScrollValue;

	const resizeHandler = () => {
		maxScrollValue = document.body.offsetHeight - window.innerHeight; //엘리먼트의 높이값 - 윈도우창의 내부 높이값
	}

	const onScroll = () => {
		const scrollPer = pageYOffset / maxScrollValue; //현재 스크롤 위치값 / 위에서 구한(문서 전체 높이값)
		$('.progress-bar').style.width = scrollPer * 100 +'%'; // 0부터 ~ 1까지 비율 * 100 (100을 곱해주므로써 100단위로 만든다.)
	}

	window.addEventListener('scroll', onScroll);
	window.addEventListener('resize', resizeHandler); //브라우저 크기가 달라져도 자동으로 계산됩니다.
	resizeHandler();
})();

👉전체 소스코드

전체 소스코드를 github에도 공유합니다.😃🔥

GitHub - younhoso/younhoso