浏览器常见的几种尺寸

ScrollHeight

是计量元素内容高度的只读属性，包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的margin.

简单理解：元素的实际高度，包含可见（clientHeight）和不可见部分（overflow），不包含margin

ScrollTop

一个元素的 scrollTop 是可以去计算出这个元素距离它容器顶部的可见高度。当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.

简单理解：元素已经滚动的距离，元素顶部距离容器顶部的距离，默认情况下为0

ClientHeight

实际内容高度，相当于css盒子模型的content area，如果出现滚动条，则相当于可是区域高度

offsetHeight

只读属性，返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
和ClientHeight的区别在于是否包含padding和border
offsetHeight = contentHeight + padding * 2 + border * 2

offsetParent

只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

简单理解：距离最近的定位元素，如果没有定位元素，相对于table或者根元素

offsetTop

只读属性，返回元素距离自身offsetParent元素在垂直方向的距离