JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义

最新推荐文章于 2024-12-20 22:45:00 发布

Software攻城狮

最新推荐文章于 2024-12-20 22:45:00 发布

阅读量728

点赞数

分类专栏： Css

原文链接：https://blog.csdn.net/qq_26780317/article/details/89177290

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义

一、如图所示：
在这里插入图片描述

二、详细介绍这几个概念
接着，我们来逐步了解一下这几个概念。

①网页可见区域高：document.body.clientHeight；

②网页正文全文高：document.body.scrollHeight；

③网页可见区域高（包括边线的高）：document.body.offsetHeight；

④网页被卷去的高：document.body.scrollTop；

⑤返回当前元素相对于其offsetParent元素的顶部的距离：HTMLElement.offsetTop。

（补充：HTMLElement.offsetParent是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素，则offsetParent为最近的table，table cell或根元素（标准模式下为html；quirks模式下为body）。当元素的style.display设置为"none"时，offsetParent返回null。offsetParent很有用，因为offsetTop和offsetLeft都是相对于其内边距界的。）

每个HTML元素都有clientHeight，offsetHeight，scrollHeight，offsetTop，scrollTop，这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别，通过阅读它们的文档总结出规律如下：

clientHeight和offsetHeight属性和元素的滚动、位置没有关系，它代表元素的高度，其中：

clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。clientHeight可以通过CSS height+CSS padding-水平滚动条高度（如果存在）来计算。

在这里插入图片描述
offsetHeight:包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

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

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。
在这里插入图片描述
接下来讨论出现有滚动条时的情况：

当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时：

scrollHeight：因为子元素比父元素高，父元素不想被子元素撑的一样高就显示了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。

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

scrollHeight的值等于该元素在不使用滚动条的情况下，为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括::before和::after这样的伪元素。
在这里插入图片描述
scrollTop:代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。