공부하는 용가리. v2

html 페이지에서 scrollTop을 얻는 방법..

이전 포스팅에서 언급했듯이,
html페이지의 상단에 DTD를 선언한경우 document.documentElement.scrollTop을 이용하면 scrollTop(스크롤된 량)을 얻을 수 있다. 또, DTD를 선언하지 않은 페이지에서는 document.body.scrollTop을 이용하면 scrollTop을 얻어낼 수 있다.

하지만 우리 조경진 후배님.
"document.documentElement.scrollTop
document.body.scrollTop
둘다 모든 브라우져에서 동일한 값을 주나요?"

이런 질문을 나에게 날려주었다..
(ㄱ- 이런 실험은 니가 하도록 하는게 어때?)

후훗. 하지만 근성을 갖고 실험한 결과..
내 예상과 다르잖아.!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 췟..

역시 Safari 3.1.1은 다르다. -_-
스크롤 한후 documentElement와 body의 값을 alert해보았을때, 그 값을 출력했더니..
Safari 3.1.1은 DTD와 DTD를 선언하지 않은 경우, 둘다 documentElement.scrollTop의 결과가 0이었다.

내가 테스트한 다른 브라우저 윈도우환경(FF3, Opera 9.5, IE7, IE6)에서 DTD에서는 documentElement의 값을 내뱉어 주었다..

별수가 없구나~ 그냥 체크해서 리턴하는 함수를 만들어 쓰도록 하자..

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

함수의 출처는 여기다.

덕분에, 좋은 정보 알았다만, 이런 귀찮은 실험은 본인이 해보는게 좋지 않을까..? 
ㅋㅋ