彻底分清clientHeight，scrollHeight，offsetHeight，clientTop，scrollTop，offsetTop的区别

clientHeight，scrollHeight，offsetHeight

1. clientHeight: 可理解为内部可视区高度，样式的height+上下padding

2. scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

3. offsetHeight:可理解为div的可视高度，样式的height+上下padding+上下border-width。

clientTop，scrollTop，offsetTop

1. clientTop: 容器内部相对于容器本身的top偏移，实际就是 上border-width （div1是10px，div2是20px）

1. scrollTop: Y轴的滚动条没有，或滚到最上时，是0；y轴的滚动条滚到最下时是 scrollHeight-clientHeight（很好理解）

1. offsetTop: 容器到其包含块顶部的距离，粗略的说法可以理解为其父元素。 offsetTop = top + margin-top + border-top

 

滚动时通常我们只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离，否则就是滚动过头了（手机上的上下拉取）！

代码：

    
    
    
    
    



    

        

            

            

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

            

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