카테고리 없음

Javascript에서 scrollTop이 안먹어 고생한 경험

znoflo 2007. 1. 8. 16:57
scrollTop : 스크롤바가 있을 경우 스크롤된 거리
clientHeight : 브라우저상에 실제로 보여지는 높이

위 두가지만 있으면 페이지 하단에 따라다니는 레이어를 만들 수 있다.

그런데 document.body.scrollTop 값이 0으로 나오거나 document.body.clientHeight값이 제대로 나오지 않을 경우가 있다. 그럴땐 페이지 상단의 DTD를 살펴보자.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위와 같은 DTD(Document Type Declaration)라면 이를 삭제하면 간단히 해결 된다....지만,
방법이 조금 거시기 하다...

다른 방법이 있다.
document.documentElement로 접근하면 깔금하게 해결~. ^^

참고로 documentElement는 document 엘레먼트를 읽기전용으로 반환하는 속성이라고 한다.
MSDN에 나와있는 다음의 예를 보면 간단히 이해된다.

: 현재 페이지 HTML 태그 안의 innerHTML이 나타난다.


<SCRIPT>
function fnGetHTML(){
  var sData = document.documentElement.innerHTML;
  oResults.value=sData;
}
</SCRIPT>
<INPUT TYPE=BUTTON ONCLICK="fnGetHTML()" VALUE="EXCUTE"> ← MSDN에서 빼먹어서 추가.
<TEXTAREA ID = oResults ROWS = 10 STYLE="WIDTH:97%">
</TEXTAREA>

(참조 : http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/documentelement.asp )

가끔 스크립트가 제대로 작동을 안하거나 화면이 이상하게 제어가 잘 안될때에는 DTD 형식을 한번 살펴보자. 가끔 DTD를 Copy&paste해서 페이지를 생성하다보면 원하지 않는 형식을 지정할 경우가 있다. Strict로 선언을 할경우 특히 그렇다. 페이지 제일 상단에 있으면서도 한번 당하기 전에는 잘 눈에 띄지 않는 부분이다. (몇줄 안되는 내용인데 이참에 확 외워버려야겠다.) 위 문서형 선언에 대해 참고할 만한 링크 몇개 던지며 마무리.