当前位置：首页 > news >正文

【JS】scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight

news 2025/9/12 1:02:28

scrollTop、scrollHeight、clientTop、clientHeight、offsetTop以及offsetHeight

1. scrollTop 与 scrollHeight

1.1 scrollTop

scrollTop 是这六个属性中唯一一个可写的属性。

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

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

如下图：

在这里插入图片描述

由于这个属性是可写的，其可以被设置为任何整数值，但在赋值时有以下注意点：

如果一个元素不能被滚动，那么赋值后，scrollTop 属性仍将被设置为0
设置scrollTop的值小于0，则赋值后，scrollTop 被设为0
如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

同时，由于该属性可写的特性，我们经常会使用该属性来实现回到顶部的效果：element.scrollTop = 0

1.2 scrollHeight

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

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

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

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

如下图：

在这里插入图片描述

根据该属性的定义，我们常常利用该属性与 scrollTop、clientHeight 之间的关系来判断元素是否滚动到底部：element.scrollHeight - element.scrollTop === element.clientHeight

2. clientTop 与 clientHeight

2.1 clientTop

clientTop 同样是一个只读属性，其表示一个元素顶部边框的宽度，这个宽度并不包括顶部外边距或内边距。

2.2 clientHeight

这个属性同样是是只读属性，对于没有定义CSS高度或者内部元素的元素，该属性值为0。

若定义了高度或内部的元素，则它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

实际上，clientHeight 就是height + padding - 滚动条的值，即元素内容在视口中展示的高度

如下图：

在这里插入图片描述

3. offsetTop 与 offsetHeight

3.1 offsetTop

要了解 offsetTop 属性，首先需要了解 Element.offsetParent 属性。

Element.offsetParent 属性指向最近的包含该元素的定位元素。如果找不到，则指向最近的 tabel 或 table cell 元素，或者是根元素（标准模式下为html；quirks 模式下为body）。另外，当元素的 display 属性设置为 none 时，offsetParent 属性指向 null。

而 offsetTop 属性，其表示了当前元素相对于其 offsetParent 元素的顶部内边距的距离。