clientHeight、scrollHeight、offsetHeight的区别和理解

说的再多也比不上一个例子好理解—看图

目前页面是停留在蓝色区域的，下面的是看不见的，蓝色区域包满了整个可视区屏幕
蓝色区域为我们可视化的区域，红色边框包围的为总页面的区域 即红 粉 黄 的高度和
现在scrollHeight = 红色边框的高度 （若没固定高度，会随着内容改变）内容的实际高度+上下padding
clientHeight= 蓝色区域的高度 （相当于我们可视化的高度，这是固定的）（height+padding，不包含边框）
offsetHeight 和 clientHeight差不多，不过它包含了边框 这里我们没有设置边框所以它们是相等的
再多介绍一个scrollTop帮助大家更好理解
scrollTop 蓝色区域离顶部的距离 现在毫无疑问是 0
假设 每个颜色区域的高度为250px 则
scrollHeight = 750px
clientHeight= 250px
offsetHeight = 250px
scrollTop = 0px

例子：知道到达底部了

现在我们滑动页面到最底端 也就是现在屏幕被黄色区域所包满
则现在的值是多少呢？
scrollHeight = 750px
clientHeight= 250px
offsetHeight = 250px
这些值应该是不变的 因为 我们这里模拟的是高度固定 自然不会变化 那scrollTop呢？
之前在顶部时:scrollTop = 0px
现在：scrollTop = 蓝色高度+粉色高度 = 500px
则到底顶部为: scrollHeight - clientHeight = scrollTop
如果有边框则换成 offsetHeight

如有不当之处请下方留言