offset client scroll 等各个JS宽高度大小代表的含义归纳。

转载自：https://www.imooc.com/article/17571

网页可见区域高度:document.body.clientHeight.
网页正文全文高度:document.body.scrollHeight.
网页可见区域高度(包括边线的高):document.body.offsetHeight.
网页被卷去的高:document.body.scrollTop.
屏幕分辨率高度:window.screen.height;

每个html元素都有clientHeight,offsetHeight,scrollHeight,offsetTop,scrollTop这5个元素高度、滚动、位置相关的信息。
单凭单词很难搞清楚他们之间有什么区别。通过阅读他们的文档总结出规律如下：
clientHeight和offsetHeight属性和元素的滚动、位置没有关系，它们代表元素的高度。其中：
1.clientHeight：包括padding但是不包括border、水平滚动条、margin元素的高度,(内容和padding).
clientHeight和clientWidth都是这样,只包括内容和padding.

58f5b2fa00012ea604110247.jpg

2.offsetHeight
包括padding,border,和滚动条。但不包括margin的元素高度。
对于inline的元素，offsetHeight一直都是0.单位是px。

offset.jpg

接下来讨论有滚动条的情况了

3. 当本元素的子元素比本元素高而且overflow=scroll的时候：
   scrollHeight：因为子元素比父元素高，父元素不想跟子元素一样高就会显示出滚动条。在滚动过程中有部分元素被隐藏了。scrollHeight代表包括当前不可见部分的高度。而可见部分的高度其实就是clientHeight。也就是说scrollHeight >= clientHeight 恒成立。在有滚动条的时候讨论scrollHeight才有意义。
   在没有滚动条的时候 scrollHeight === clientHeight 横成立 单位px。

   
   
   

   scroll.jpg

4. scrollTop，代表在有滚动条的时候，滚动条向下滚动的距离，也就是元素顶部被遮住部分的高度。在没有滚动条的时候，scrollTop === 0 恒成立。

5. offsetTop:当前元素顶部距离最近父元素顶部的距离，和滚动条没有关系。单位px。

   
   
   

   offsettop.jpg

最后上一张让人虎躯一震的图

huquyizhen.gif