HTML window 객체의 pageYOffset와 outerHeight 값이 undefined.

현재 창의 높이(height)와 현재 얼마만큼 스크롤이 됐는지(offset) 을 구해야 하는데 자꾸 값은 안주고 undefined만 내뱉어서 당황 스럽습니다.

window.pageYOffset은 스크롤바의 offset을 반환 합니다. 크롬에서는 값이 제대로 나오지만 IE8에서는 도통 나오질 않고 undefined만 확인 할 수 있죠. IE10에서는 문제 없이 잘 나옵니다.
https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY

var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

크로스 브라우징을 위한 코드 입니다. pageYOffset의 값이 없을때, 같은 값이 들어있는 다른 이름의 변수들을 참조 하네요. 위의 코드를 사용하면 모든 브라우저에서 원하는 값을 가져올 수 있습니다.

다음 window.outerHeight는 현재 창의 높이 입니다. 스크롤바는 상관없이 눈에 보이는 현재 높이 값 입니다. 창에서 주소표시줄과 같은 높이들도 포함된 값입니다. 이 값도 IE8에서는 undefined만 뱉어 냅니다. 아. 찢어발기고 싶은 IE8. 허접쓰레기 같은 그림판 캡처를 첨부 합니다. window.innerHeight는 html이 표시되는 부분의 높이값만 가집니다.

왼쪽이 크롬, 오른쪽이 IE8 입니다.

http://www.w3schools.com/jsref/obj_window.asp
첫번째 값은 스크롤 offset값.
두번째 값은 창 높이.
세번째부터 다섯번째 값은 첫번째 값과 같은 변수들 입니다.

w3schools 만을 참고해서 하다보면 IE8에서 곤란해지는 일이 종종 발생 합니다. 캡처를 확인해보면 IE8은 완전 반대로 값을 출력해 주네요. 하아.

매번 이렇게 헤매야 할까요. 이런거 신경 안쓰게 해주는 JQUERY로 같은 결과 값을 얻어 보도록 하죠. JQUERY를 사용하면 IE8에서도 문제 없이 값을 가져 올 수 있습니다.

$(window).scrollTop() == window.pageYOffset //그리고 3 - 5번째 값들
$(window).height()    == window.innerHeight

크로스 브라우징을 생각해서 JQUERY를 사용하도록 합시다아. 머리아프지 말고... 헌데 만능은 아니더라고 하더군요. 그저 믿고 있다가 크게 한방 당하신 분이 계시더라는...


* "좋은 것이 빠지고 난 뒤에 남은 허름한 물건"을 뜻하는 '허섭스레기'. 지난 8월 31일에 바뀐 표준어 규정에 따라 '허접쓰레기'도 표준말이 되었다고 합니다.