window.outerHeight 질문

Question

화면의 크기만큼 빼줘야 하기때문에

window.outerHeight 를 사용하였는데..

window.innerHeight 가 아닌 outerHeight 사용한 이유가 있을까요?

그리고 영상처럼

Math.ceil(scrollTop / (document.body.scrollHeight - window.outerHeight) * 100) 으로 적용하고 콘솔로 찍히게 했는데

스크롤을 최하단으로 내렸을 때 100이 아닌 101, 102 이렇게 숫자가 보여집니다

딱 100으로 맞출 순 없는 건가요?

Answer

안녕하세요.

영상 하단에 수정을 해서 넣었습니다. 영상 캡쳐 당시에는 다른 요소가 없다보니 못 느꼈는데, 오차가 심해졌네요.

정확하게 0~100이 나오는 코드는

Math.round(scrollTop / (document.body.scrollHeight - window.innerHeight) * 100)

위 처럼 해보시면 됩니다.

ceil 은 올림 -> round 반올림으로 바꿔주시고

window내부 사이즈를 가져오는 innerHeight 로 가져오시면 됩니다.

-

영상 편집을 하던가 하단 설명글에 크게 강조를 해야겠네요.

즐거운 하루 보내세요.

Answer

위에 작성해드린 코드와 같이 innerHeight 로 빼주시는 게 더 정확합니다. body{ height : 3000px; } 이렇게 해보시고 0~100까지 잘 나오는지 테스트해보세요.

Answer

화면의 크기만큼 빼주어야 할 때, outerHeight 또는 innerHeight ..둘 중 아무거나 쓰면 되는 건가요??