JS中的clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义1，如图所示：
二、详细介绍这些概念
接下来，让我们一点点地理解这些概念。
网页可视区域高： document.body.clientHeight；
网页正文全文高： document.body.scrollHeight；
网页可视区域高度(包括边框高度):document.body.offsetHeight；
页面缠绕的高度(document.body.scrollTop；
返回当前元素与offsetParent元素顶部的距离。 HTMLElement.offsetTop。
(添加) HTMLElement.offsetParent是只读属性，如果向最近的) closest (包含层次上最近的)返回包含该元素的锚点元素，则offsetParent返回最近的表、表单元格在快速模式下为主体)。 如果元素的style.display设置为“none”，则offsetParent返回空值。 offsetTop和offsetLeft相对于内部边距，因此offsetParent很有用。 ）
每个HTML元素都有clientHeight、offsetHeight、scrollHeight、offsetTop和scrollTop，这五个元素的高度、滚动和位置属性，分别取决于单词的类型
clientHeight和offsetHeight属性表示元素的高度，而与元素的滚动和位置无关。 如下所示。
clientheight :包含填充但不包含边框、水平滚动条或边距的元素的高度。 对于inline元素，此属性始终为0、单位px和只读元素。 CSS height CSS padding-可以根据水平滚动条的高度(如果有)计算客户端高度。
offsetHeight:包括填充、边框和水平滚动条，但不包括边距元素的高度。 对于inline元素，此属性始终为0、单位px和只读元素。
元素的offsetHeight通常是元素CSS高度的度量，包括元素的边框、内部边距和元素的水平滚动条(如果存在并渲染)，例如：before和： AAA
对于文档的实体对象，包含替代元素的CSS具有高线性总含量。 浮动元素的内容高度将被忽略。
接下来，说明有滚动条的情况。
如果此元素的子元素高于此元素且overflow=scroll，则此元素为scroll。 在这种情况下，情况如下：
scrollHeight :由于子元素高于父元素，因此父元素将以不希望子元素支撑的高度显示滚动条。 滚动时隐藏本要素的一部分。 scrollHeight表示包含当前不可见部分的元素的高度。 可见部分的高度实际上是clientHeight，也就是scrollHeight=clientHeight恒常成立。 有滚动条时讨论scrollHeight才有意义，没有滚动条时scrollHeight==clientHeight恒常成立。 单位px，只读元素。
名为Element.scrollHeight的只读属性是元素内容高度的度量，包括由于溢出而在视图中未显示的内容。
scrollHeight的值等于该元素与视口中使用的内容相对应而不使用滚动条所需的最小高度。 如果没有垂直滚动条，则scrollHeight的值与“元素”视图填充所有内容所需的最小值clientHeight相同。 包括元素填充，但不包括元素边框和边距。 scrollHeight还包含类似：before和：after的伪元素。
scrollTop:表示滚动条存在时滚动条向下滚动的距离，也就是元素顶部被隐藏的部分的高度。 如果没有滚动条，则scrollTop==0始终成立。 单位px，可读取设定。
Element.scrollTop属性获取设置元素的内容在垂直方向滚动的像素数。
一个元素的scrollTop值是从该元素顶部到视口可见内容(顶部)的距离的比例。 如果元素的内容没有生成垂直滚动条，则其scrollTop值为0。
从offsetTop:中当前元素的顶部到父元素的顶部的距离与有无滚动条无关。 单位px，只读元素。
HTMLElement.offsetTop是只读属性，它返回当前元素与offsetParent元素顶部的距离。
可供参考：
添加3359 blog.csdn.net/QQ _ 26780317/article/details/89177290链接的说明