一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥
2024-08-30 19:54:54
scrollHeight最终数值的组成:
var scrollHeight = currentElementContent.height +currentElement.paddingTop+currentElement.paddingBottom
官方的解释是：scrollHeight的高度等于当内容完全适配浏览器viewpoint后的高度，这个高度包括padding-top以及padding-bottom。除此之外，如果内容超出了浏览器view窗口，scrollHeight反映的也是内容实际高度（selfheight+paddingTop+paddingBottom）。
如图：
scrollTop官方给出的解释是：它反映的是内容被垂直滚动的距离，当浏览器视窗没有垂直滚动条时，scrollTop的值是0
offsetHeight最终的数值组成
var offsetHeight = elementHeight + elementPaddingTop+elementPaddingBottom+elementBorderTop+elementBorderBottom+elementHorizontalScrollar
官方给出的解释是：offsetHeight反映的是元素css设定的height（包括垂直方向的padding，border，以及水平方向的滚动条）
如图：
clientHeight最终数值的组成
var clientHeight = elementHeight+ elementPaddingTop+elementPaddingBottom- height of horizontal(if present)
官方的解释是：clientHeight反映的是元素自身的高度，其中包裹padding在垂直方向的高度。
参考资料：
容易混淆的client-*,scroll-*,offset-*
最新文章
- Storm UI 说明
- modelsim仿真vivado自动化脚本
- Windows下安装postgresql_psycopg2时出现 "Unabled to find vcvarsall.bat" 的解决办法
- SQL Server 2008 数据库通过镜像同步备份（数据库热备）
- Spring MVC 3 深入总结
- windows7安装phpnow Apache非管理员权限不能操作Windows NT服务的解决方法
- c语言中格式化输出函数的研究
- SQL分组查询GroupBy
- 【CSS3】Advanced7：CSS Transitions
- 手机Android音视频采集与直播推送，实现单兵、移动监控类应用
- URAL DP第一发
- 修改字符串 ToCharArray()
- 怎样处理iOS 5与iOS 6的 low-memory
- 系列五AnkhSvn
- scrapy安装失败：error:Microsoft Visual C++ 14.0 is reuired.及同类型安装问题解决办法
- android常犯错误记录（二）
- dataguard日志自动删除
- Actifio OnVault 8.0
- 计算机网络原理和OSI模型与TCP模型
- CentOS配置SSH无密码