IE/FF/Chrome에서 document.documentElement 및 document.body의 scroll Height/scroll Top/client Height 및 스크롤 바가 페이지 맨 아래로 당겨졌는지 판단

3214 단어 scrollTop
DTD에서 IEdocument을 선언했습니다.documentElement.scrollHeight 브라우저의 모든 내용 높이, 문서.body.scrollHeight 브라우저의 모든 컨텐트 높이 document.documentElement.scrollTop 브라우저 스크롤 부분 높이, 문서.body.scrollTop은 항상 0document입니다.documentElement.clientHeight 브라우저 가시 부분 높이, 문서.body.clientHeight 브라우저의 모든 내용 높이
FFdocument.documentElement.scrollHeight 브라우저의 모든 내용 높이, 문서.body.scrollHeight 브라우저의 모든 컨텐트 높이 document.documentElement.scrollTop 브라우저 스크롤 부분 높이, 문서.body.scrollTop은 항상 0document입니다.documentElement.clientHeight 브라우저 가시 부분 높이, 문서.body.clientHeight 브라우저의 모든 내용 높이
Chromedocument.documentElement.scrollHeight 브라우저의 모든 내용 높이, 문서.body.scrollHeight 브라우저의 모든 컨텐트 높이 document.documentElement.scrollTop은 항상 0, document.body.scrollTop 브라우저 스크롤 부분 높이 문서.documentElement.clientHeight 브라우저 가시 부분 높이, 문서.body.clientHeight 브라우저의 모든 내용 높이
DTD에서 IE document을 선언하지 않았습니다.documentElement.scrollHeight 브라우저 가시 부분 높이, 문서.body.scrollHeight 브라우저의 모든 컨텐트 높이 document.documentElement.scrollTop은 항상 0, document.body.scrollTop 브라우저 스크롤 부분 높이 문서.documentElement.clientHeight는 항상 0, document.body.clientHeight 브라우저 가시 부분 높이
FFdocument.documentElement.scrollHeight 브라우저 가시 부분 높이, 문서.body.scrollHeight 브라우저의 모든 컨텐트 높이 document.documentElement.scrollTop은 항상 0, document.body.scrollTop 브라우저 스크롤 부분 높이 문서.documentElement.clientHeight 브라우저의 모든 내용 높이, 문서.body.clientHeight 브라우저 가시 부분 높이
Chrome document.documentElement.scrollHeight 브라우저 가시 부분 높이, 문서.body.scrollHeight 브라우저의 모든 컨텐트 높이 document.documentElement.scrollTop은 항상 0, document.body.scrollTop 브라우저 스크롤 부분 높이 문서.documentElement.clientHeight 브라우저의 모든 내용 높이, 문서.body.clientHeight 브라우저 가시 부분 높이
브라우저의 모든 내용 높이, 즉 브라우저 전체 프레임의 높이, 스크롤 바 볼륨 제거 부분 + 가시 부분 + 밑에 숨겨진 부분의 높이 합계 포함
브라우저의 스크롤 부분 높이, 즉 스크롤 막대 볼륨의 부분 높이, 즉 가시적 상단 거리 전체 객체의 상단 높이입니다.
종합하여
1、document.documentElement.scrollTop 및 document.body.scrollTop은 항상 하나가 0이기 때문에 이 두 개의 합으로 scrollTop을 구할 수 있습니다
2, scroll Height,client Height는 DTD가 선언된 경우 document Element을 사용하고, 선언되지 않은 경우 body를 사용한다.
여기 전에 오류가 있었어요,document.compatMode는 DTD가 성명되었는지 여부를 판단할 수 있습니다. 값은 'BackCompat' 이고, 값은 'CSS1Compat' 입니다. 성명되었습니다.따라서 스크롤 바가 페이지 맨 밑으로 당겨졌는지 판단하려면 다음과 같은 코드를 사용할 수 있다
window.onscroll  = function (){

    var marginBot = 0;

    if (document.compatMode === "CSS1Compat"){

        marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-  document.documentElement.clientHeight;

    } else {

        marginBot = document.body.scrollHeight - document.body.scrollTop-  document.body.clientHeight;

    }

    if(marginBot<=0) {

        //do something        

    }

}

좋은 웹페이지 즐겨찾기