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

示例:

对应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，scrollTop（可以赋值）

scrollTop指的是滚动条滚动的高度

计算公式：

scrollTop=elem.scrollTop

5，scrollTo（函数）

和scrollTop类似，可以指定滚动条位置，elem.scroll(x,y)，与scrollTop相比使用更简单。

6，scrollheight、scrollTop和clientHeight的关系

当scrollHeight-clientHeight=scrollTop时，说明滚动条滚到了底部。