귀찮은 엘리먼트 속성값(scrollTop,pageXoffset,scrollX)을 금방 찾게 도와주는 유용한 링크소개

자바스크립트는 브라우저마다 DOM 아주 세세하게 조금씩 달라서 버그찾기가 만만치 않습니다.


오늘은 document.documentElement.scrollTop 라는 속성을 사용하여 자바스크립트함수를 구현하고 있었습니다.

IE quirks 모드에서는

document.documentElement.scrollHeight 이 속성을 대체하여

document.body.scrollHeight 를

document.documentElement.scrollTop 이 속성을 대체하여

document.body.scrollTop 를 사용해야 합니다.

IE standard 모드에서는 걱정이 필요없지요.



그래서 무난하게 document.documentElement.scrollTop 을 사용하여 자바스크립트 함수를 구현하였는데

웹킷(사파리, 크롬)에서 자바스크립트함수가 정상적으로 작동하지 않더라고요.

그래서 구글링을 해보니 웹킷은 document.documentElement.scrollTop 이 항상 0 값만 나타나고 document.body.scrollTop을 사용해야 하는 것을 알았습니다.


이런 사소한걸 암기하고 있을수도 없는거고 이거 영귀찮아서 이러고 있던 찰나에 아주 귀중한 링크하나를 발견했습니다.

http://13thparallel.com/archive/viewport/example6.htm

방문해보시면



document.documentElement.scrollLeft  
document.documentElement.scrollTop   
document.body.scrollLeft
document.body.scrollTop
window.pageXOffset
window.pageYOffset
window.scrollX
window.scrollY

속성에 대해서 내가 사용하고 있는 브라우저가 어떠한 속성을 지원하고 있는지 쉽게 알수 있습니다.

이렇게 고마울수가. ㅎ