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元素在垂直方向的距离