图解scrollHeight, clientHeight, offsetHeight, scrollTop以及获取方法

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

• 引用的图片
  • 第一张图
  • 第二张图
  • 第三张图
• scrollHeight
  • 定义
• clientHeight
  • 定义
• offsetHeight
  • 定义
• scrollTop
  • 定义
• 获取方法

引用的图片

第一张图

第二张图

第三张图

scrollHeight

定义：

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

clientHeight

定义：

1. 视野内可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距；
2. 还可以参考《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章；