개발자의 길

[HTML]document.body.scrollTop 대체 본문

10. HTML

[HTML]document.body.scrollTop 대체

자르르 2010. 4. 30. 17:36



document.body.scrollTop 은 스크롤시에 페이지의 상단의 위치값을 반환하거나 부여한다.
허나
HTML 코드 상당엔 DTD 가 선언되어 있다면 scrollTop이 재구실을 못해버리는 문제가 발생된다.

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

document.documentElement.scrollTop 을 사용하면 잘 된다.
익스의 경우 XHTML 로 넘어 오면서 호환에서 표준 모드로 변경 되면서 발생된것이라고 나오는데... 잘모르겠다.

document.html.scrollTop 으로 해도 된다고 한다 하지만 테스트는 안해 봤다.(안되던데-.-)

 

관련글

회원이름을 클릭하면 나타나는 레이어는 게시판 작성 초기부터 구현하고 싶은 기능이었다.
그러나 자바스크립트는 정말 아무 것도 모르는 새하얀 수준이라 엄두를 내지 못하던 차에 우연히 제로보드 공식 사이트에서 관련 팁을 보게 되었다. (http://www.zeroboard.com/study_javascript/1507977)
디자인만 대충 입혀서 게시판에 적용해보니 스크롤이 내려가 있지 않았을 경우는 제대로 표현이 되지만 스크롤이 조금이라도 내려가 있으면 팝업은 그 만큼 위로 올라가서 출력이 되었다.
지금에서야 안 것이지만 document.documentElement.scrollTop 이 값을 클릭이 이루어진 세로 위치값인 event.clientY 에 더해주어야 스크롤을 움직인만큼의 좌표값을 계산하여 정확한 위치에서 출력이 되는 것이다.
document.body.scrollTop 로는 불여우와 오페라에서 제대로 출력이 되지 않는다.
검색을 해보니 그 이유는 해당 문서의 정의 속성때문이었다.

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


이와 같은 형식의 dtd 속성을 삭제해주면 사용이 가능하지만 근본적인 해결책은 아니다.
document.documentElement.scrollTop 는 엘리먼트를 읽기전용으로 반환하는 속성이란다.

 

저작자표시

'10. HTML' 카테고리의 다른 글

[html] html,jsp,php,asp redirect - 언어별 리다이렉트 방법  (0) 2015.12.09
html 특수 문자 표현식  (0) 2015.02.09
[html]반응형 웹 테스트  (0) 2013.07.26
text 박스 테두리 없애기  (1) 2010.01.21
font-size, font-style등 폰트 스타일  (0) 2010.01.21


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'10. HTML' Related Articles more
Comments