XHTML1일때 스크롤링시 문제점
Scripter/JAVASCRIPT / 2008. 3. 28. 20:57
제목은 거창하게 달았지만 데꾸벅만 몰랐던 것일수도 있다.
대부분 SI관련 프로젝트는 quirks mode(스펠링이 맞나? 흠..)에서만 작업을 하기 때문에
XHTML transitional이나 strict모드에서는 잘 작업을 하지 않아서 잘못된것임에도 인지못하였던것일 수도 있다.
DOCTYPE이 아래와 같이 XHTML transitional 모드일때
[ 슬라이딩 메뉴 소스 ]
와 같이 늘쌍 써오던것이 Opera를 제외한 IE6,7,8 및 FF2.0에서 적용이 되질 않았다.
혹, XHTML같은 경우 테이블의 height가 100%가 지정되지 않기때문에 이런 문제일수도 있을것 같아 검색하다 보니 다음과 같은 글을 발견하였다.
http://forums.digitalpoint.com/archive/index.php/documentbodyscrolltop-in-ie/t-11965.html
http://forums.mozilla.or.kr/viewtopic.php?t=2382&sid=442d133080a29e669f7ca4357cdf3415
참조들 하심 되겠고....
말하고자 하는 바는 사실 우리가 늘쌍 써 왔던 document.body.가 아니라 document.html.scrollTop해도 적용이 되긴 하나 정확한 표현은 document.documentElement 라는 사실이다.
(위 소스에서 수정해줘야 해요~~ ^^)
대부분 SI관련 프로젝트는 quirks mode(스펠링이 맞나? 흠..)에서만 작업을 하기 때문에
XHTML transitional이나 strict모드에서는 잘 작업을 하지 않아서 잘못된것임에도 인지못하였던것일 수도 있다.
DOCTYPE이 아래와 같이 XHTML transitional 모드일때
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[ 슬라이딩 메뉴 소스 ]
function slidingBars(objid,starttop,bottommargin){
var obj=document.getElementById(objid);
if(obj !=null && obj !=undefined){
var ntop;
var maxtop;
var speed=10;
var move=function(){
ntop=starttop+document.body.scrollTop;
maxtop=document.body.scrollHeight-(bottommargin+obj.offsetHeight);
if(maxtop < ntop) ntop=maxtop;
movevalue = Math.floor((ntop-obj.offsetTop)/speed);
obj.style.top=(obj.offsetTop+movevalue)+'px';
setTimeout(move,10);
}
move();
}
}
window.onload=function(){
slidingBars('slidingbar',35,100);
}
<div id="slidingbar">포지션:엡솔루트;지-인덱스:1인 레이어</div>
var obj=document.getElementById(objid);
if(obj !=null && obj !=undefined){
var ntop;
var maxtop;
var speed=10;
var move=function(){
ntop=starttop+document.body.scrollTop;
maxtop=document.body.scrollHeight-(bottommargin+obj.offsetHeight);
if(maxtop < ntop) ntop=maxtop;
movevalue = Math.floor((ntop-obj.offsetTop)/speed);
obj.style.top=(obj.offsetTop+movevalue)+'px';
setTimeout(move,10);
}
move();
}
}
window.onload=function(){
slidingBars('slidingbar',35,100);
}
<div id="slidingbar">포지션:엡솔루트;지-인덱스:1인 레이어</div>
와 같이 늘쌍 써오던것이 Opera를 제외한 IE6,7,8 및 FF2.0에서 적용이 되질 않았다.
혹, XHTML같은 경우 테이블의 height가 100%가 지정되지 않기때문에 이런 문제일수도 있을것 같아 검색하다 보니 다음과 같은 글을 발견하였다.
http://forums.digitalpoint.com/archive/index.php/documentbodyscrolltop-in-ie/t-11965.html
http://forums.mozilla.or.kr/viewtopic.php?t=2382&sid=442d133080a29e669f7ca4357cdf3415
참조들 하심 되겠고....
말하고자 하는 바는 사실 우리가 늘쌍 써 왔던 document.body.가 아니라 document.html.scrollTop해도 적용이 되긴 하나 정확한 표현은 document.documentElement 라는 사실이다.
(위 소스에서 수정해줘야 해요~~ ^^)
documentElement 속성값은 문서의 최상위노드(root) 참조를 나타내는 개체이다.
이 속성은 읽기전용이며 디폴트값은 없다.
가장 전형적인 최상위 노느는 html 개체이다.
이 속성은 읽기전용이며 디폴트값은 없다.
가장 전형적인 최상위 노느는 html 개체이다.
'Scripter > JAVASCRIPT' 카테고리의 다른 글
| FireFox에서 Fiddler 사용 및 Json Formatter설치 (2) | 2008.04.01 |
|---|---|
| Javascript and jQuery Talk (0) | 2008.03.29 |
| 자바스크립트로 루비프로그래밍을? (2) | 2008.03.28 |
| IE8에서의 자바스크립트 (0) | 2008.03.27 |
| FF의 검색사이트 추가방법 (0) | 2008.03.26 |