innerHeight

Question

왜 scrollHeight에서 innerHeight를 빼야하는지 잘 이해가 안돼요 ㅠㅠ scrollTop이 현재 스크롤의 top위치? scrollHeight가 진회색으로 칠해져있는 스크롤바의 높이? innerHeight가 현재 보고 있는 화면의 높이? 라고 제가 이해한게 맞나요? 위가 맞다면 왜 스크롤바의 높이에서 화면높이를 빼는지 모르겠어요

코딩일레븐 · Answer

그 부분이 조금 헷갈리실 수도 있는데요. 문서 길이가 1000px 인 페이지를 브라우저 700px 로 띄워놓고 스크롤을 한다면 scrollTop 값은 0~300 까지만 나옵니다. 실제로 스크롤바는 그만큼만 움직이니까요. 브라우저를 900px 정도로 크게 띄워놓으면 스크롤바는 0~100까지만 움직이죠. 깔짝 깔짝. 조금 움직이던, 많이 움직이던 우리는 0~100% 의 백분율 값이 필요합니다. 그래서 제대로된 백분율을 내기위해 1000px - 브라우저 height 값을 빼주는 겁니다. 백분율 값 = 스크롤탑 / (문서길이 - 브라우저 높이) * 100 scrollTop / ( document.documentElement.scrollHeight - window.innerHeight ) )* 100; 예시로 든 수치를 반영해보면 스크롤탑 / (1000 - 900) * 100 입니다. 이동 값 0~100 / (기준은 100 ) * 100 _ document.documentElement.scrollHeight 를 document.body.offsetHeight 로 바꾸면 덜 헷갈리실까요? 바꾸셔도 결과는 같습니다. html 문서 전체 길이에서 화면 높이 값을 빼주는 게 핵심입니다.

innerHeight

scrollTop / (document.documentElement.scrollHeight - window.innerHeight) )* 100;