一起看看 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() { ...
随机推荐
- gitlab常见错误解决办法
1 fail: gitlab-workhorse: runsv not running systemctl start gitlab-runsvdir.service systemctl status ...
- Ubuntu14.04 x64 zabbix 3.0 安装
U buntu14.04 x64 zabbix 3.0 安装 苦于网上的文档很多,但是对初学者来说,很多都搭建不成功,我重新安装一下.记录一下. 下载deb wget http://repo.za ...
- 【NOIP1999】【Codevs 1046】旅行家的预算
http://codevs.cn/problem/1046/ Solution: 贪心,如果当前油价很低,它就比起当前剩余油的价还低就可以替换,并且每次加满,最后把剩的油卖掉即可 油价用单调链表(不知 ...
- hdu 5782(kmp+hash)
Cycle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- 并不对劲的bjwc d4t1
先膜一波宽神Orz%%%%% 拿到这题的第一反应就是:暴力啊!感觉神奇的钟点并没有什么性质,可能卡常能过吧……所以就写了一个O(22^3*59^3)的暴力.本来想打表,但是发现代码长度有限制,写不下. ...
- 解决 django 中 mysql gone away 的问题
最近在项目中,我使用 Django Command 模块写了一个脚本,处理从 MQ 发来的消息,并入库.在测试过程中,程序运行良好,但是在程序上线并运行一段时间后,出现了以下错误: Operation ...
- python datatime日期和时间值模块
datetime.time():是一个时间类,这个类接受4个参数,分别代表时,分,秒,毫秒.参数的默认值是为0 #!/usr/bin/env python #coding:utf8 import da ...
- Java多线程系列二——Thread类的方法
Thread实现Runnable接口并实现了大量实用的方法 public static native void yield(); 此方法释放CPU,但并不释放已获得的锁,其它就绪的线程将可能得到执行机 ...
- JSP/Servlet Web应用中.properties文件的放置与读取
本地项目 在本地类库中,我经常使用当前目录来放置.properties文件,这时调用方只要引用我的jar,并且将我的.properties放在他的classpath里面即可,比如: p.load(ne ...
- Storm概念学习系列之storm的定时任务
不多说,直接上干货! 至于为什么,有storm的定时任务.这个很简单.但是,这个在工作中非常重要! 假设有如下的业务场景 这个spoult源源不断地发送数据,boilt呢会进行处理.然后呢,处理后的结 ...