一文弄懂scrollHeight、clientHeight以及offsetHeight

元素样式的这三个属性，在平常工作中应该经常遇到过。但是平时做的需求，组件库就已经帮我们基本实现了，比如antd中的Affix组件，iview中的同样也是Affix组件，所以也没有怎么探究过。

这篇文章主要就是详细讲一下这三个属性的定义，以及一些可以应用在工作中的实用方法。

scrollHeight

scrollHeight就是一个元素能够展示其所有内容所需要的最小高度，是元素整个的content加上padding的高度，不包括border。如果元素内容超过可视区域，可以想象成将整个元素撑开的高度。

ENTIRE content & padding (visible or not)

clientHeight

clientHeight就是一个元素的content + padding的高度，不包括border、margin也不包括横向滚动条的高度。clientHeight的高度包括了这个元素伪元素(::before、::after)的高度。如果该元素的内容没有产生纵向滚动条的话，该元素的scrollHeight和clientHeight相等。

VISIBLE content & padding

offsetheight

offsetHeight是一个元素的content+padding+border+margin+scroll bar的高度。也是在可是范围内这些高度的相加。

下面是一则计算方法，很有用：

element.scrollHeight - element.scrollTop === element.clientHeight

应用场景：

1. 我们经常见到的在一些软件初始页面的条约申明阅读，用户必须要浏览完这页的申明才能进行下一步，这里面就会检测这元素是否有滑动到底部。

请戳这里！！！

参考文章：