scrollHeight, clientHeight, offsetHeight, scrollTop这几个概念，在网上浩如烟海的文档中基本都是文字解释，《JavaScript高级程序设计(第3版)》给出的图解还是有些晦涩难懂，很难想象具体在窗口中指哪些部分，所以一直感到懵懂。这次项目中需要实现上拉加载的效果，花了不少时间，请教了不少同行，最后加工出了这篇图文解释。

引用的图片

图一， scrollHeight， 见参考链接
图二， clientHeight、offsetHeight，见参考链接
图三，见参考链接

scrollHeight

定义：

1. 所有的内容（指图一图中有文字的红色框框内）和内边距，这个内容包括肉眼看不见、溢出、被窗口遮挡的部分；
2. 还可以参考《JavaScript高级程序设计(第3版)》第324页；

clientHeight

定义：

1. 图二中视野内可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距；
2. 同一种型号的手机上是不变的，比如iPhone 6上就是667px；
3. 还可以参考《JavaScript高级程序设计(第3版)》第322页；

offsetHeight

定义

1. 图二中，在clientHeight的基础上， 加上边框和滚动条的高度；
2. 还可以参考《JavaScript高级程序设计(第3版)》第321页；

scrollTop

定义

1. 见图三，滚动条滚动了多少距离（包括之前已滚动过的隐藏内容）就是scrollTop；
2. 如果还不够清楚，还可以参考《JavaScript高级程序设计(第3版)》第324页；

获取方法

在《JavaScript高级程序设计(第3版)》第198页，document.body是为了兼容IE浏览器，但在我实践过程中，发现chrome也需要document.body来获取这些数据，而不是document.ducumentElement。需要特意说明的是：这里的chrome是在device情况下，而且我的项目是运行在微信端。

为了兼容浏览器，用以下方法（举例）：

const scrollLeft = Math.max(document.documentElement.scrollLeft,       
document.body.scrollLeft); 
const scrollTop = Math.max(document.documentElement.scrollTop, 
document.body.scrollTop);

原因：
用Math.max()方法是因为获取方法不兼容时，scrollTop始终为0，其他属性同理；

---

参考文章：

1. http://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight
2. http://emn178.pixnet.net/blog/post/95137696-%E5%9C%96%E8%A7%A3scrollleft%2C-scrolltop%2C-scrollwidth%2C-scrollheight%E5%92%8Cscr
3. http://www.cnblogs.com/zhenyu-whu/archive/2012/11/13/2768004.html
4. 《JavaScript高级程序设计(第3版)》第12章；