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

scrollTop

clientHeight

offsetHeight

一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥的更多相关文章

  1. Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop

    Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...

  2. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  3. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  4. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

  5. top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略 2.posTop posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而p ...

  6. 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...

  7. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  8. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

  9. 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

    1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件    function justAtest()    {    ...

随机推荐

  1. Java生成带logo 的二维码

    这个工具类主要实现了两点功能: 1. 生成任意文链接的二维码. 2. 在二维码的中间加入图像. 主要实现步骤: 第一步: 导入QR二维码3.0 版本的core包和一张jpg图片(logo). core ...

  2. 通过spark rdd 求取 特征的稀疏向量

    通过spark rdd 求取  特征的稀疏向量 spark 类标签的稀疏 特征向量 - bonelee - 博客园 http://www.cnblogs.com/bonelee/p/7814081.h ...

  3. Message: unknown error: Element is not clickable at point

    Message: unknown error: Element is not clickable at point google chrome - Debugging "Element is ...

  4. 中国剩余定理模板&俄罗斯乘法

    void ex_gcd(ll a,ll b,ll &d,ll &x,ll &y){ if(!b){d=a;x=1LL;y=0LL;} else {ex_gcd(b,a%b,d, ...

  5. 常用经典SQL语句大全完整版--详解+实例 《来自网络，很全没整理，寄存与此》

    常用经典SQL语句大全完整版--详解+实例 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML ...

  6. luogu3942将军令

    https://www.zybuluo.com/ysner/note/1302132 题面 在大小为\(n\)的树上选择尽量少的点,使得所有未选择的点距离选择了的点小于等于\(k\). \(n\leq ...

  7. 卸载CentOS7-x64自带的OpenJDK的方法

    第一步:查看并卸载CentOS自带的OpenJDK 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java version "1.6.0& ...

  8. JS浮点数精度运算

    一般来讲,我们在项目中必不可少的需要进行各种数值的计算,但是这种计算全部放在服务端会给服务器带来很大的压力,所以势必要客户端来 分担一些计算的压力. 从客户端来说,JavaScript是一门弱类型语言 ...

  9. 洛谷 P1414 又是毕业季II(未完成)

    题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业晚会上,相信,这一定 ...

  10. BFS(最短路+路径打印) POJ 3984 迷宫问题

    题目传送门 /* BFS:额,这题的数据范围太小了.但是重点是最短路的求法和输出路径的写法. dir数组记录是当前点的上一个点是从哪个方向过来的,搜索+,那么回溯- */ /************* ...