scrollHeight
,clientHeight
,offsetHeight
,scrollTop
这几个概念,在网上浩如烟海的文档中基本都是文字解释,《JavaScript高级程序设计(第3版)》给出的图解还是有些晦涩难懂,很难想象具体在窗口中指哪些部分,所以一直感到懵懂。这次项目中需要实现上拉加载的效果,花了不少时间,请教了不少同行,最后加工出了这篇图文解释。
引用的图片
图一, scrollHeight, 见参考链接图二, clientHeight、offsetHeight,见参考链接
图三,见参考链接
scrollHeight
定义:
- 所有的内容(指图一图中有文字的红色框框内)和内边距,这个内容包括肉眼看不见、溢出、被窗口遮挡的部分;
- 还可以参考《JavaScript高级程序设计(第3版)》第324页;
clientHeight
定义:
- 图二中视野内可见的内容和内边距,不包括x轴的滚动条高度、边框、外边距;
- 同一种型号的手机上是不变的,比如iPhone 6上就是667px;
- 还可以参考《JavaScript高级程序设计(第3版)》第322页;
offsetHeight
定义
- 图二中,在
clientHeight
的基础上, 加上边框和滚动条的高度; - 还可以参考《JavaScript高级程序设计(第3版)》第321页;
scrollTop
定义
- 见图三,滚动条滚动了多少距离(包括之前已滚动过的隐藏内容)就是
scrollTop
; - 如果还不够清楚,还可以参考《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,其他属性同理;
参考文章:
- http://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight
- http://emn178.pixnet.net/blog/post/95137696-%E5%9C%96%E8%A7%A3scrollleft%2C-scrolltop%2C-scrollwidth%2C-scrollheight%E5%92%8Cscr
- http://www.cnblogs.com/zhenyu-whu/archive/2012/11/13/2768004.html
- 《JavaScript高级程序设计(第3版)》第12章;
网友评论