CSS中clientHeight、offsetHeight、scrollHeight、scrollTop、scrollTo几者的区别和关联

怎么区分clientHeight、offsetHeight、scrollHeight、scrollTo、scrollTop呢，我们通过下面的示例来搞清楚。

现有如下示例:

对应css为

.div {
    width:300px;
    height: 200px;
    margin: auto;
    padding:10px;
    border: 5px solid #000;
    font-size: 12px;
    overflow-y: auto;
    background-color: #FFEB3B;
    color: #7c7c7c;
}

1，clientHeight：指的是元素可视区域的高度（只读属性）

可视区域高度就是指上图中黄色可见区域的高度，不包含横向滚动条高度和border边框。

所以：

clientHeight=contentHeight+paddinTop+paddingBottom-横向滚动条高度

 

示例clientHeight计算结果为：

clientHeight=200(内容高度)+20(paddingTop+paddingBottom的高度)-17(横向滚动条高度)=203px

 

2，offsetHeight（只读属性）

offsetHeight比clientHeight多了横向滚动条高度和border边框宽度。

所以：

offsetHeight=contentHeight+paddingTop+paddingBottom+横向滚动条高度+borderTopWidth+boderBottomWidth;

 

示例offsetHeight计算结果为：

clientHeight=200(内容高度)+20(paddingTop+paddingBottom的高度)+17(横向滚动条高度)+20(borderTopWidth+boderBottomWidth)=230px

 

3，scrollHeight（只读属性）

scrollHeight指的是内容完全展开之后的高度

上图示例内容完全展开显示之后：

计算公式：

scrollHeight=elem.scrollHeight

 

4，scrollTo（函数）

设置（document没有此方法，适用于document.documentElement、dom元素、window窗口）滚动条的偏移量（x方向、y方向）。

 

5，scrollTop（可以赋值）

设置或者获得带有滚动条的dom元素内部，滚动条（y方向）滚动的高度（window、document没有此属性，只适用于dom元素）

计算公式：

scrollTop=elem.scrollTop//获的元素内部滚动条滚动的高度

elem.scrollTop=200//设置元素内部滚动条滚动的高度

 

常用计算公式：

//滚动条滚动高度：

let scrollTop=document.body.scrollTop||document.documentElement.scrollTop||window.pageYoffset;

//内容高度：

let scrollHeight=document.body.scrollHeight;

//window窗口高度：

let windowHeight=window.innerHeight;

//计算滚动条距离底部的距离

let bottomHeight=scrollHeight-scrollTop-windowHeight