인프런 커뮤니티 질문&답변

이은혜님의 프로필 이미지

작성한 질문수

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

'가로 진행 바' 제작 (스크롤 백분율 구하기)

window.outerHeight 질문

해결된 질문

21.03.29 10:44 작성

·

292

0

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

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

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

그리고 영상처럼

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

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

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

답변 3

1

코딩일레븐님의 프로필 이미지
코딩일레븐
지식공유자

2021. 03. 29. 10:55

안녕하세요.

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

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

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

위 처럼 해보시면 됩니다.

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

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

-

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

즐거운 하루 보내세요.

0

코딩일레븐님의 프로필 이미지
코딩일레븐
지식공유자

2021. 03. 30. 09:57

위에 작성해드린 코드와 같이 innerHeight 로 빼주시는 게 더 정확합니다.

body{ height : 3000px;  }

이렇게 해보시고 0~100까지 잘 나오는지 테스트해보세요.

0

이은혜님의 프로필 이미지
이은혜
질문자

2021. 03. 30. 09:43

화면의 크기만큼 빼주어야 할 때,

outerHeight 또는 innerHeight .. 둘 중 아무거나 쓰면 되는 건가요??