clientHeight、offsetHeight、scrollHeight、scrollTop

由于长时间对clientHeight、offsetHeight、scrollHeight、scrollTop这几个js-dom不理解，处于半迷糊状态，现在就仔仔细细实验整理一波，希望能做个总结，方便以后能快速理解别人代码和做出自己想要的。

结论

1. clientHeight=height+padding-top+padding-bottom

下面main这个div的clientHeight：1060px=1000px(height)+2x30px(padding-top+padding-bottom)

2. offsetHeight=height+padding-top+padding-bottom+border-top+border-bottom

下面main这个div的offsetHeight：1070px=1000px(height)+2x30px(padding-top+padding-bottom)+2x5px(border-bottom+border-top)
也就是说：offsetHeight=clientHeight+border
也就是说：offsetHeight和clientHeight都不包含margin

3. scrollHeight

   1. 如果div不包含字内容或者子div的高度不大于父div的高度，不需要撑破父div，此时本div的scrollHeight=本clientHeight（不包含本div的border和margin）比如下面的main这个div，在这里scrollHeight=clientHeight=1060px
   2. 如果div包含了子div并且子div的总高度大于父div的clientHeight，那么如果父div设置了scroll:auto就会有滚动此时父div的scrollHeight>clientHeight的。在下面的例子当中 container的scrollHeight(1250px)=main的scrollHeight(1060px)+main的上下bottom(2x5px)+main的上下margin(2x20px)+top的height(60px)+container的上下padding(2x40px)也就是说：当子div高度大于父div的高度时，此时父div的scrollHeight等于其内部所以子元素的height、padding、border、margin的总和加上自身的padding。这时候scrollHeight和自身的clientHeight关系不大，clientHeight当做了可以被用户看到的大小，相当于用户的显示，能看到的就这么多。

4. scrollTop当子div的内容高度比父div高度大并且设置了滚动时，scrollTop是父div中的内容已经向上移动并消失在可视范围的内容高度。当父div其内的内容滑到底时有个标志： scrollHeight=clientHeight+scrollTop 这个式子只能在滑到底时使用，没有滑
   到底时 scrollHeight>clientHeight+scrollTop

5. 部分属性关系如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JNRLLMo-1604213867610)(https://i.loli.net/2020/11/01/yLMx9aOk2vS8gsI.png)]

6. pageYOffset是window才有的属性，意思是body上滑了多少内容，相当于scrollTop

7. 项目地址codepen.io

源码

    <div class="container">
	<div class="top">Top</div>