一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥
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-*
一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥的更多相关文章
- Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop
Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略 2.posTop posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而p ...
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- offsetTop/offsetHeight scrollTop/scrollHeight 的区别
offsetTop/offsetHeight scrollTop/scrollHeight 这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...
- 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分
1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件 function justAtest() { ...
随机推荐
- 抽象类（abstract class）和接口（interface）有什么异同？
相同点: 1.抽象类和接口都不能被实例化,但可以定义抽象类和接口类型的引用. 2.一个类如果继承了抽象类和接口,必须要对其中的抽象方法全部实现.(接口中方法默认的是public abstract修饰的 ...
- Python获取CPU、内存使用率以及网络使用状态代码
Python获取CPU.内存使用率以及网络使用状态代码_python_脚本之家 http://www.jb51.net/article/134714.htm
- 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)
利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...
- flask-migrate 数据迁移
作用:做数据库迁移依赖:flask-script flask-sqlalchemy 使用 项目结构 manage.py(其它文件内容与flask-sqlalchemy中一样) from s8day13 ...
- 杂项-Java：JeePlus
ylbtech-杂项-Java:JeePlus 一个集成了代码生成器的java快速开发框架 1. 介绍返回顶部 1. 响应式开发 JeePlus采用了目前极为流行的扁平化响应式的设计风格,UI框架使用 ...
- LOJ#510. 「LibreOJ NOI Round #1」北校门外的回忆（线段树）
题面 传送门 题解 感谢\(@M\_sea\)的代码我总算看懂题解了-- 这个操作的本质就是每次把\(x\)的\(k\)进制最低位乘\(2\)并进位,根据基本同余芝士如果\(k\)是奇数那么最低位永远 ...
- laravel 模型 $table $guarded $hidden
首先以App\User模型为例 1.$table属性 表名,对应数据库中的表名 2.guarded)属性 guarded表示在create()方法中不能被赋值的字段 3.$hidden属性 $hid ...
- 树形DP URAL 1039 Anniversary Party
题目传送门 /* 题意:上司在,员工不在,反之不一定.每一个人有一个权值,问权值和最大多少. 树形DP:把上司和员工的关系看成根节点和子节点的关系,两者有状态转移方程: dp[rt][0] += ma ...
- NHibernate3.2学习笔记
一.开发环境 数据库:SQLServer2008 编译器:VS2010 .Net版本:.Net Framework 4.0 二.涉及第三方程序集 NHibernate.dll:版本3.2 Iesi.C ...
- poj1240 Pre-Post-erous!
思路: 根据前序序列和后序序列递归构造m叉树,确定每个节点的子节点数量.再用组合数公式累乘. 实现: #include <iostream> using namespace std; ][ ...