clientHeight,scrollHeight,offsetHeight,clientTop,scrollTop,offsetTop의 차이를 철저히 구분하다

clientHeight，scrollHeight，offsetHeight

clientHeight: 내부 가시구역 높이로 이해할 수 있고 스타일의height+상하padding

scrollHeight: 내용의 실제 높이 + 상하padding(div의 Height를 제한하지 않으면 Height는 스스로 적응한다. 일반적으로 scrollHeight==clientHeight)

offsetHeight:div의 가시 높이, 스타일의height+상하padding+상하border-width로 이해할 수 있습니다.

clientTop，scrollTop，offsetTop

clientTop: 용기 내부가 용기 자체의 top에 비해 편이되고 실제는border-width(div1은 10px, div2는 20px)

scrollTop: Y축의 스크롤 바가 없거나 맨 위로 굴러갈 때 0;Y축의 스크롤 바가 맨 아래로 굴러갈 때는scroll Height-client Height (잘 이해)

offsetTop: 용기에서 블록의 꼭대기까지의 거리는 대략적으로 그 부원소로 이해할 수 있다.offsetTop = top + margin-top + border-top

 
스크롤을 할 때 보통 우리는 스크롤 Top만 할 수 있다. 스크롤 Top이 0이 되면 스크롤 Height-client Height는 정상적인 스크롤 거리이다. 그렇지 않으면 너무 굴러가는 것이다(핸드폰의 위아래로 내려가는 것)!
코드:

    
    
    
    
    



    

        

            

            

                
div1
                
clientHeight：
                
scrollHeight：
                
offsetHeight：
                
clientTop：
                
scrollTop：
                
offsetTop：
            
        
        

            

                
div2
                
clientHeight：
                
scrollHeight：
                
offsetHeight：
                
clientTop：
                
scrollTop：
                
offsetTop：
            
        
    



    clientHeight1.innerHTML = div1.clientHeight
    scrollHeight1.innerHTML = div1.scrollHeight
    offsetHeight1.innerHTML = div1.offsetHeight
    clientTop1.innerHTML = div1.clientTop
    scrollTop1.innerHTML = div1.scrollTop
    offsetTop1.innerHTML = div1.offsetTop
    clientHeight2.innerHTML = div2.clientHeight
    scrollHeight2.innerHTML = div2.scrollHeight
    offsetHeight2.innerHTML = div2.offsetHeight
    clientTop2.innerHTML = div2.clientTop
    scrollTop2.innerHTML = div2.scrollTop
    offsetTop2.innerHTML = div2.offsetTop