Scrolltop - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

====== Scrolltop ======

===== ScrollHeight =====

스크롤 시키지 않았을때의 전체 높이를 구한다.
Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

{{https://developer.mozilla.org/@api/deki/files/840/=ScrollHeight.png}}

===== Clientheight =====

눈에 보이는 많큼의 높이를 구한다.
Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

{{https://developer.mozilla.org/@api/deki/files/608/=Clientheight.png}}

===== ScrollTop =====

스크롤되어 올라간 많큼의 높이를 구한다.
Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

{{https://developer.mozilla.org/@api/deki/files/842/=ScrollTop.png}}
===== 브라우저별 차이점 =====

scrollHeight / clientheight / scrollTop 모두 W3C의 표준이 아니며 브라우저별로 다르게 표현된다.
같은 효과를 내더라도 경우(Dtd 여부와 종류, 수직 가운데 정렬 등)에 따라서 0~40픽셀 이상의 차이가 생길 수 있으며 올바르게 적용되는 속성과 잘못 적용되는 속성이 뒤섞여있다.
==== Dtd Standard Mode ====

source	IE 7.0	IE 6.0	IE 5.5	Firefox 3	Safari 4 beta
document.body.scrollHeight	1519	1519	1549	1516	1540
document.documentElement.scrollHeight	1549	1549	897	1540	1540
document.body.clientHeight	1519	1519	893	1516	1516
document.documentElement.clientHeight	856	879	0	863	893
document.body.scrollTop	0	0	843	0	831
document.documentElement.scrollTop	882	857	0	845	0
=== Dtd Quirks Mode ===

source	IE 7.0	IE 6.0	IE 5.5	Firefox 3	Safari 4 beta
document.body.scrollHeight	1549	1549	1549	1540	1540
document.documentElement.scrollHeight	858	883	897	1540	1540
document.body.clientHeight	854	879	893	863	893
document.documentElement.clientHeight	0	0	0	1540	1540
document.body.scrollTop	1031	1006	992	987	987
document.documentElement.scrollTop	0	0	0	0	0

document.documentElement는 Dtd가 Standard Mode일 때,
document.body는 Dtd가 Quirks mode일때 사용하여 값을 구한다.

문제는,
Standard Mode를 사용해도 Quirks mode로 표현하는 IE5.5와,
Standard Mode를 사용해도 document.documentElement.scrollTop는 0을 반환하고 document.body.scrollTop만 제대로 가져오는 Safari 4 beta에 있다.

이에 대한 해결책으로는 몇가지가 있다.
ScrollHeight / Clientheight

Standard Mode일때에는 document.documentElement를 사용하고,
Quirks mode일때에는 document.body를 사용하여 값을 반환하는 방법.
=== 조건연산자 사용 ===

var sheight = document.compatMode == “CSS1Compat” ? document.documentElement.scrollHeight : document.body.scrollHeight;
var cheight = document.compatMode == “CSS1Compat” ? document.documentElement.clientheight : document.body.clientheight;

=== 조건문 If 사용 ===

if (!document.compatMode || document.compatMode == ‘BackCompat’) {
var sheight = document.body.scrollHeight;
var cheight = document.body.clientheight;
} else {
var sheight = document.documentElement.scrollHeight;
var cheight = document.documentElement.clientheight;
}
Standard Mode일때 IE5.5에만 document.body를 사용하는 방법
Navigator.UserAgent로 브라우저 종류 판별

if (navigator.userAgent.indexOf(“MSIE 5.5″)!=-1) {
var sheight = document.body.scrollHeight;
var cheight = document.body.clientheight;
} else {
var sheight = document.documentElement.scrollHeight;
var cheight = document.documentElement.clientheight;
}

ScrollTop

Dtd의 Standard / Quirks Mode를 구분지어 얻어낸 값으로는 제대로 사용 할 수 없다.
사파리4베타가 Standard Mode에서 document.documentElement.scrollTop를 제대로 반환하지 않기 때문이다.
속성을 제대로 사용하지 못하면 값을 전부 0으로 반환하므로, 다음과 같이 사용할 수 있다.
if (document.body.scrollTop == 0) {
var top = document.documentElement.scrollTop;
} else {
var top = document.body.scrollTop;
}
scrollTop이 실제로 0일 경우, document.body.scrollTop나 document.documentElement.scrollTop의 값을 제대로 반환하든 잘못 반환하든 어차피 0을 반환하므로 잘못 계산되지는 않는다.
 
출처는 http://www.xhost.co.kr/bbs/?id=javascript%2C772%2C38&sfl=&stx=&sst=wr_hit&sod=desc&sop=and&page=38

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International