关于clientHeight、offsetHeight和scrollHeitght那些事

关于这三个属性，首先想说的是，它们都是只读属性，什么是只读，相信不用我多说。

接下来，图文说明一下三个属性

1.element.clientHeight

image.png

看到上图相信已经很直观的知道什么是clientHeight，其实就是可视区高度，它返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

2.element.scrollHeight

image.png

有时候在我们的布局中会出现overflow这样的样式从而导致部分内容不可见。而scrollHeight返回的是元素的内容高度(包括overflow导致的不可见内容)。在没有垂直滚动的情况下，它其实等于clientHeight。同样的，包括元素的padding而不包括margin

小提示：
判定元素是否滚动到底？
如果元素滚动到底，下面等式返回true，没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight

3.element.offsetHeight

image.png

offsetHeight相对就比较简单的了，它包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话）以及元素内容高度(这里指的是渲染出来的部分，即可见部分的内容)，不包含:before或:after等伪类元素的高度。