×

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

96
米店的老板娘
2017.05.08 16:47* 字数 612

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章;
Vanilla JavaScript
Web note ad 1