一起看看 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() { ...
随机推荐
- Codeforces Round #363 (Div. 2)E. LRU
E. LRU time limit per test 2 seconds memory limit per test 256 megabytes input standard input output ...
- Ubuntu 16.04下安装MacBuntu 16.04 TP 变身Mac OS X主题风格
Ubuntu 16.04下安装MacBuntu 16.04 TP 变身Mac OS X主题风格 sudo add-apt-repository ppa:noobslab/macbuntu sudo a ...
- Python: PS 图像特效 — 抽象画风
今天介绍一种基于图像分割和color map 随机采样生成一种抽象画风的图像特效,简单来说,就是先生成一张 color map 图,颜色是渐变的,然后针对要处理的图像,进行分割,这里用的是 SLIC ...
- tomcat调优配置
今天遇到一个tomcat服务注册后配置Java参数没效果,最后在注册表中删除原来的tomcat服务后,顺便看了一下tomcat的调优配置,看别人总结的不错,就转载一下. Tomcat.Jetty.Gl ...
- linux驱动编写（Kconfig文件和Makefile文件）
在Linux编写驱动的过程中,有两个文件是我们必须要了解和知晓的.这其中,一个是Kconfig文件,另外一个是Makefile文件.如果大家比较熟悉的话,那么肯定对内核编译需要的.config文件不陌 ...
- JavaScript代码优化新工具UglifyJS
jQuery 1.5 发布的时候 john resig 大神说所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意. UglifyJS 是一个服务端no ...
- Java调用ssl异常（javax.net.ssl.SSLHandshakeException: No appropriate protocol）
今天做升级用了jdk1.8发现java调用SSL的时候,突然一下抛出一个异常 经过一阵瞎搞,最后才发现是因为jdk1.8版本导致SSL调用权限上有问题. 解决办法:找到jdk 1.8安装目录,找到C: ...
- Maven之项目搭建与第一个helloworld（多图）
这次记录第一个搭建一个maven的helloworld的过程. 转载 1.搭建web工程肯定得new 一个 maven工程,假如project中没有直接看到maven工程,那么选择Other,然后在W ...
- 贪心 Codeforces Round #191 (Div. 2) A. Flipping Game
题目传送门 /* 贪心:暴力贪心水水 */ #include <cstdio> #include <algorithm> #include <cstring> us ...
- ACM_抢糖果
抢糖果 Time Limit: 2000/1000ms (Java/Others) Problem Description: 今天计实班的生活委员心情大好,在永诚超市狂购了好多好多糖果,好开心~o(∩ ...