innerHeight

Question

왜 scrollHeight에서 innerHeight를 빼야하는지 잘 이해가 안돼요 ㅠㅠ

scrollTop이 현재 스크롤의 top위치?

scrollHeight가 진회색으로 칠해져있는 스크롤바의 높이?

innerHeight가 현재 보고 있는 화면의 높이?

라고 제가 이해한게 맞나요? 위가 맞다면 왜 스크롤바의 높이에서 화면높이를 빼는지 모르겠어요

Answer

그 부분이 조금 헷갈리실 수도 있는데요.

문서 길이가 1000px 인 페이지를 브라우저 700px로 띄워놓고 스크롤을 한다면

scrollTop 값은 0~300 까지만 나옵니다. 실제로 스크롤바는 그만큼만 움직이니까요.

브라우저를 900px 정도로 크게 띄워놓으면 스크롤바는 0~100까지만 움직이죠.

깔짝 깔짝.

조금 움직이던, 많이 움직이던 우리는 0~100% 의 백분율 값이 필요합니다.

그래서 제대로된 백분율을 내기위해

1000px - 브라우저 height 값을 빼주는 겁니다.

백분율 값 = 스크롤탑 / (문서길이 - 브라우저 높이) * 100

예시로 든 수치를 반영해보면

스크롤탑 / (1000 - 900) * 100 입니다.

이동 값 0~100 / (기준은 100 ) * 100

_

document.documentElement.scrollHeight 를 document.body.offsetHeight 로

바꾸면 덜 헷갈리실까요? 바꾸셔도 결과는 같습니다.

html 문서 전체 길이에서 화면 높이 값을 빼주는 게 핵심입니다.