js中的scrollTop、scrollHeight 、clientHeight、clientWidth、clientLeft、clientTop、offsetTop

scrollTop scrollHeight

mdn - scrollTop
mdn - scrollHeight

• scrollTop

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

个人理解：就是上部分超出容器的高度

• scrollHeight

这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

个人理解：可滚动内容的高度 || 总高度 - 容器高度

clientHeight clientWidth

mdn - clientHeight
mdn - clientWidth

• clientHeight
  只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

个人理解：就是content height + 上下padding - 横向滚动轴高度

• clientWidth 同理，content width + 左右padding - 垂直滚动轴宽度

clientLeft clientTop

mdn - clientLeftt
mdn - clientTop

• clientLeft
  只读属性，表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。

个人理解：就是一个只读的（元素的左border）

• clientTop 同理，表示上border

offsetTop

mdn - offsetTop

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

个人理解：offsetTop是找到元素相对于父级定位元素的距离

offsetHeight

mdn - offsetHeight

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

个人理解：就是一个只读的 （元素的 content height + 上下padding + 上下 border + +横向滚动轴高度）