图解scrollHeight, clientHeight, offsetHeight, scrollTop以及获取方法
来源:互联网 发布:机器视觉算法及应用 编辑:程序博客网 时间:2024/04/24 02:26
scrollHeight, clientHeight, offsetHeight, scrollTop这几个概念,在网上浩如烟海的文档中基本都是文字解释,《JavaScript高级程序设计(第3版)》给出的图解还是有些晦涩难懂,很难想象具体在窗口中指哪些部分,所以一直感到懵懂。这次项目中需要实现上拉加载的效果,花了不少时间,请教了不少同行,最后加工出了这篇图文解释。
- 引用的图片
- 第一张图
- 第二张图
- 第三张图
- scrollHeight
- 定义
- clientHeight
- 定义
- offsetHeight
- 定义
- scrollTop
- 定义
- 获取方法
引用的图片
第一张图
第二张图
第三张图
scrollHeight
定义:
- 所有的内容(指第一张图中有文字的红色框框内)和内边距,这个内容包括肉眼看不见、溢出、被窗口遮挡的部分;
- 还可以参考《JavaScript高级程序设计(第3版)》第324页;
clientHeight
定义:
- 视野内可见的内容和内边距,不包括x轴的滚动条高度、边框、外边距;
- 还可以参考《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,其他属性同理;
参考文章:
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章;
- 图解scrollHeight, clientHeight, offsetHeight, scrollTop以及获取方法
- clientHeight/scrollHeight/offsetHeight/offsetParent/offsetTop/offsetHeight/scrollTop
- height、clientHeight、scrollHeight、offsetHeight的区别,和获取scrollTop的方法
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- clientHeight、offsetHeight、scrollHeight、scrollTop的区别
- clientHeight、scrollHeight、offsetHeight和scrollTop之间区别
- js中clientHeight、offsetHeight、scrollHeight、scrollTop详解
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- js中clientHeight、offsetHeight、scrollHeight、scrollTop详解
- clientHeight、scrollHeight、offsetHeight和scrollTop之间区别
- js获取浏览器高度以及clientHeight、scrollHeight、offsetHeight区别
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- js之clientHeight、offsetHeight,scrollHeight,scrollTop的区别
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- 终于清晰啦!offsetHeight、scrollHeight、clientHeight和offsetTop、scrollTop、clientTop
- clientHeight、offsetHeight和scrollHeight
- 集中式日志系统 ELK 协议栈详解
- SOAP请求、响应报文格式
- JSON中optString()和getString()区别
- 直接插入排序和希尔排序
- sqlserver服务器名称改成本地IP地址登录
- 图解scrollHeight, clientHeight, offsetHeight, scrollTop以及获取方法
- 批量下载搜狗词库
- longest-consecutive-sequence,数组中最长的连续序列
- linux crontab 定时执行脚本
- java中判断两个字符串是否相等的问题
- 僵尸进程和处理方式
- YARN任务pending
- java中集合类HashSet、ArrayList、LinkedList总结
- eclipse配置spark开发环境