JS中元素的scrollTop，scrollHeight，offsetTop，offsetHeight，offsetLeft，clientHeight等属性的理解

问题：一直以来，每次写到滚动，我总是不知道怎么去取元素的以上属性，每次写出的内容都糊里糊涂，这次我彻底理解一次，并做下记录。
 

一、从css的overflow属性开始

迷惑问题的首要：找不到溢出属性overflow设置在哪个元素身上。

overflow属性定义:其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

从定义上看出，我才明白自己的迷惑点，overflow是设置元素的内容溢出时的行为，那么就是写在当前元素身上的属性，用来设置当前元素内容（文本或者子级元素）的溢出行为。

重要的一点，当前元素的高必须是固定的，overflow属性才能起作用。

举例：

<div class="box">
     Michaelmas term lately over, and the Lord Chancellor sitting
 in Lincoln's Inn Hall.     
    Implacable November weather. 
    As much mud in the streets as if the waters had but newly retired
 from the face of the earth.
</div>

<style>
.box {
    height:100px;
    overflow:auto;
}
</style>

<div class="box">
     <p>
        Michaelmas term lately over, and the Lord Chancellor sitting
     in Lincoln's Inn Hall.     
        Implacable November weather. 
        As much mud in the streets as if the waters had but newly retired
     from the face of the earth.
    </p>
</div>

<style>
.box {
    height:100px;
    overflow:auto;
}
</style>

 结果图：

写在前面

二、scrollTop属性 

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

从定义上看，scrollTop是获取当前元素的内容垂直滚动高度，scrollTop的值从当前元素上获取。

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

三、scrollHeight(scrollWidth)属性

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

从定义上看，scrollHeight是元素内容的实真实高度，scrollHeight的值从当前元素上获取。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 

四、clientHeight(clientWidth)属性 

定义：只读属性是一个元素内容可视区域的高度 。它是元素内部的高度，包含内边距，但不包括边框、外边距和水平滚动条。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度来计算。

五、offsetTop属性

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

六、offsetHeight(offsetWidth)属性

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

七、offsetLeft属性

定义：offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。 

参考：

JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）-CSDN博客

 HTMLElement.offsetLeft - Web API 接口参考 | MDN