一起看看 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

转载于:https://www.cnblogs.com/mrdooo/p/6635865.html