그러냐

document.body.scrollTop 대체 본문

javascript

document.body.scrollTop 대체

관절분리 2016. 1. 27. 18:27
반응형

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 는 엘리먼트를 읽기전용으로 반환하는 속성이란다.
흠, 왜 그래야만 하는 지는 모르나..ㅎ;
아무튼 이렇게 쓰면 해결이 된다.
그런데 어제 처음 설치해본 사파리에서 다시 처음 겪었던 증상(스크롤 위치에 따른 비정상적인 출력)이 다시 나타나 한참을 매달리다 document.documentElement.scrollTop 와 document.body.scrollTop 를 같이 입력하였더니 제대로 출력이 되었다.
ㅎㅎ 이 브라우저라는게 참 고달픈 존재인 것같다.
이 js를 총 5개의 브라우저 -(IE,Opera,FireFox,Netscape,Safari) - 에서 테스트하여 완벽한 출력을 뽑아내고나니 누군가 보기엔 초보적이고 간단한 코드임엔 분명할 것이지만 그래도 목표한 것을 이뤄냈다는 성취감과 뿌듯함이 있어서 좀 들여다보다 나처럼 고생하는 유저들이 있을 것같아 엄청난 주석을 달아놓았다. ㅎㅎ

[출처] document.body.scrollTop 대체|작성자 나무실

[출처] document.body.scrollTop 대체|작성자 관절분리

반응형
저작자표시

'javascript' 카테고리의 다른 글

selectbox value set 대신 selectedIndex 사용  (0) 2016.01.27
자바 스크립트 쿠키 셋팅, 추출, 삭제 예제  (0) 2016.01.27
주소 복사 스크립트  (0) 2016.01.27
우클릭 완벽차단 스크립트  (0) 2016.01.27
자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode()  (0) 2016.01.27
'javascript' Related Articles more