clientHeight scrollHeight offsetHeight

<div  style="height:200px;padding:10px;border:1px solid green;"></div>

對於上面的div，它的border的height有多高？答案是200+10*2+1*2=222。

直接上結論：
在style或css樣式中的 height:200px  指的是內容可視區的高度，不含內邊距，不含border，不含外邊距，而不是div的高度。

如下結論在 firefox、chrome、IE10+、QQ瀏覽器中都測試過，都是一致的：

clientHeight: 可理解爲內部可視區高度，樣式的height+上下padding(本例即220）。

scrollHeight: 內容的實際高度+上下padding（若是沒有限制div的height，即height是自適應的，通常是scrollHeight==clientHeight）

offsetHeight:可理解爲div的可視高度，樣式的height+上下padding+上下border-width。（本例是222）

height 這個變量在幾個瀏覽器中都是undefined

style.height這個變量在本例中是'200px'，不過遺憾的是隻有將高度定義在元素的style屬性中這個變量纔有效，若是是抽取到了樣式表中是沒法取到的。

 

clientTop: 容器內部相對於容器自己的top偏移，實際就是 上border-width （本例是1）

scrollTop: Y軸的滾動條沒有，或滾到最上時，是0；y軸的滾動條滾到最下時是 scrollHeight-clientHeight（很好理解）

offsetTop: 能夠理解爲容器相對於document的top的絕對偏移。等於top+margin-top

 

滾動時一般咱們只能scrollTop，當scrollTop爲 0 到 scrollHeight-clientHeight  是正常的滾動距離，不然就是滾動過頭了（手機上的上下拉取）！