(JS/JQuery) 전체화면, 특정 요소의 스크롤 위치 퍼센트 계산하기

기본적으로 위치 퍼센트 계산은

{ (현재 스크롤 상단 위치좌표) / (스크롤 길이를 제외한 기준 스크롤 높이값) * 100 } %가 됩니다. 

 

예를 들어서 봅시다. 

스크롤 길이를 제외한 기준 스크롤 높이값을 100이라고 해봅시다. (편의상 이하 예시에선 기준 스크롤 높이값으로 줄여 말합니다.)

 

현재 스크롤이 최상단에 있으면

- 상단 위치좌표 = 0

- 기준 스크롤 높이값 = 100 으로

결과값은 0/100*100 = 0%가 됩니다.

 

좀 더 움직여서 스크롤을 반쯤 움직였습니다. 그러면

- 상단 위치좌표 = 50

- 기준 스크롤 높이값 = 100 으로

결과값은 50/100*100 = 50% 가 됩니다. 

 

그럼 이제 코드를 봅시다. 

---

 

1. 전체 화면의 스크롤 위치를 계산할 때

기준 스크롤 높이값은 '문서 높이'와 '브라우저 뷰포트 높이'의 차이로 계산합니다. 

 

-JavaScript

//스크롤 퍼센트값 계산
Math.floor(( 
        window.scrollY /
        (document.body.clientHeight - 
        window.innerHeight)
    ) * 100);
    
//이벤트 리스너는 window에 걸고 scroll의 변화를 기준으로 실행합니다. 
window.addEventListener("scroll", 함수);

-JQuery

 

Math.floor(($(window).scrollTop() / 
	($(document).height() - $(window).height())
    ) * 100);
    
//이벤트 리스너는 window에 걸고 scroll의 변화를 기준으로 실행합니다. 
$(window).scroll(함수명);

 

2. 전체 화면의 스크롤이 아닌 특정 요소의 스크롤 위치를 계산할 때

만약 화면 전체가 아닌 특정 요소에 있는 스크롤 위치를 계산할 때는,

'요소의 스크롤 높이'에서 '요소의 높이'를 빼서 기준 스크롤 높이값을 계산합니다. 

 

-JavaScript

//스크롤 퍼센트값 계산
Math.floor(( 
        document.querySelector("요소").scrollTop /
        (document.querySelector("요소").scrollHeight - 
        document.querySelector("요소").clientHeight)
    ) * 100);
    
//이벤트 리스너는 요소에 걸고 scroll의 변화를 기준으로 실행합니다. 
document.querySelector("요소").addEventListener("scroll", 함수);

-JQuery

//스크롤 퍼센트값 계산
Math.floor(( $("요소").scrollTop() /
	($("요소").prop("scrollHeight") - $("요소").prop("clientHeight"))
    ) * 100);
    
//이벤트 리스너는 요소에 걸고 scroll의 변화를 기준으로 실행합니다. 
$("요소").scroll(함수명);

 

JQuery의 요소 선택자는 CSS와 동일한 선택자를 사용하기 때문에, 직관적인 비교를 위해 예시 코드에서는 동일한 선택자를 사용하는 querySelector를 사용했습니다. getElementBy~종류를 사용하셔도 상관없습니다.

---

관련 문서 (JS)

스크롤 상단 속성은 여기서,

스크롤 높이 속성은 여기서,

요소 높이 속성은 여기서,

스크롤 이벤트에 대해서는 여기서 읽어볼 수 있습니다.