一塊兒看看 scrollHeight,clientHeight,offsetHeight,scrollTop是個啥

scrollHeight最終數值的組成:

var scrollHeight = currentElementContent.height +currentElement.paddingTop+currentElement.paddingBottom

 

官方的解釋是：scrollHeight的高度等於當內容徹底適配瀏覽器viewpoint後的高度，這個高度包括padding-top以及padding-bottom。除此以外，若是內容超出了瀏覽器view窗口，scrollHeight反映的也是內容實際高度（selfheight+paddingTop+paddingBottom）。

如圖：

 

scrollTop官方給出的解釋是：它反映的是內容被垂直滾動的距離，當瀏覽器視窗沒有垂直滾動條時，scrollTop的值是0

 

 

offsetHeight最終的數值組成

var offsetHeight = elementHeight + elementPaddingTop+elementPaddingBottom+elementBorderTop+elementBorderBottom+elementHorizontalScrollar

 

官方給出的解釋是：offsetHeight反映的是元素css設定的height（包括垂直方向的padding，border，以及水平方向的滾動條）

 

　　如圖：

clientHeight最終數值的組成

var clientHeight = elementHeight+ elementPaddingTop+elementPaddingBottom- height of horizontal(if present)

官方的解釋是：clientHeight反映的是元素自身的高度，其中包裹padding在垂直方向的高度。

 

 

 

 

參考資料：

容易混淆的client-*,scroll-*,offset-*

scrollHeight

scrollTop

clientHeight

offsetHeight