Scroll详解

➡️ = 只读

↔️ = 可读可写（默认）

Element

clientHeight ➡️

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

scrollHeight ➡️

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

没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。

包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

offsetHeight ➡️

元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

offsetTop ➡️

返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

offsetParent ➡️

返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body元素。

当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。

offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

scrollTop

可以获取或设置一个元素的内容垂直滚动的像素数。（可以是小数，比如缩放屏）

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

scrollLeft

可以是任意整数。

注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。

scrollLeft 可以是任意整数，然而：

• 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0。
• 如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0