搞清clientHeight、offsetHeight、scro
转载自：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属性和元素的滚动、位置没有关系它代表元素的高度，其中：
clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。
图片描述
offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。
图片描述
接下来讨论出现有滚动条时的情况：
当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时：
scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。
图片描述
scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
图片描述
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
图片描述
以下内容转载自：
https://blog.csdn.net/shibazijiang/article/details/103894498
我们开发web代码的时候,经常会遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别.
在这里插入图片描述
1.定义说明
| 条目 | 含义 | 图示 |
|---|---|---|
| clientHeight | 元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距 |
在这里插入图片描述
|
| offsetHeight | 元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数 |
在这里插入图片描述
|
| scrollHeight | 元素内容的高度,包括溢出的不可见内容 |
在这里插入图片描述
|
| offsetLeft | 返回元素左上角相对于offsetParent的左边界的偏移像素值 |
注意点
1.对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。但是文本框不是如此.文本框的offsetLeft和offsetTop是第一个文本框的左偏移和上偏移.
2.offsetParent元素指改元素的定位元素以及最近的table,td,th,body.
可见,offsetParent和position属性的包含块概念类似.大部分场景下可以通用.
3.offsetTop和offsetLeft都是相对于其内边距边界的.
offsetLeft和left属性的区别
1.position为fixed时值不同
当position为fixed的时候,offsetLeft的值将会是null,而left此时一般有确定的数字值.
2.相对边距不同
offerset的是相对于offsetParent的内边距边界,left是相对于包含块的外边距边界.
3.包含块有区别
offerset相对与定位的祖先元素或者 table/td/th/body等祖先元素,left仅仅是相对于定位祖先元素+body
clientHeight与offsetHeight的区别
clientHeight仅仅包含内边距+高度,offsetHeight包含内边距+滚动条+边框
所以可以这样说: clientHeight+滚动条高度+边框 = offsetHeight
参考资料:
1.offsetHeight官方说明
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight
2.clientHeight官方说明
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
