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. Hibernate连接数据库

    包结构如下图所示(按图标进行对齐): 环境搭好后代码分为以下几步: /** * private static final Configuration CONFIGURATION; * private ...

  2. Linux 系统内核空间与用户空间通信的实现与分析

    本文转载自:https://www.ibm.com/developerworks/cn/linux/l-netlink/index.html 多数的 Linux 内核态程序都需要和用户空间的进程交换数 ...

  3. 7-80 HTML5新增的JS选择器

    7-80 HTML5新增的JS选择器 学习要点 HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 ta ...

  4. UVA 10559 Blocks —— 区间DP

    题目:https://www.luogu.org/problemnew/show/UVA10559 区间DP,有点难想: 为了方便,先把原来就是连续一段相同颜色的点看做一个点,记一下长度: f[i][ ...

  5. python调用java程序--jpype

    官方网站:http://jpype.sourceforge.net/ 官方使用文档:http://jpype.sourceforge.net/doc/user-guide/userguide.html ...

  6. P3349 [ZJOI2016]小星星

    传送门 题意都需要看题解才能明白我是不是已经废了 题意就是求一个从树\(S\)到图\(T\)的映射,满足若树上的两个点有边,则它们映射在图中的两个点也连有边,且不能有多个点映射到同一个点 我们先不考虑 ...

  7. Nginx(二) 反向代理&负载均衡

    1.反向代理 当我们请求一个网站时,nginx会决定由哪台服务器提供服务,就是反向代理. nginx只做请求的转发,后台有多个tomcat服务器提供服务,nginx的功能就是把请求转发给后面的服务器, ...

  8. 数据结构之链式队列(C实现)

    1.1  linkqueue.h #ifndef LINKQUEUE_H #define LINKQUEUE_H #include <stdio.h> #include <mallo ...

  9. 使用Oracle的DBMS_SQL包执行动态SQL语句

    引用自:http://blog.csdn.net/ggjjzhzz/archive/2005/10/17/507880.aspx 在某些场合下,存储过程或触发器里的SQL语句需要动态生成.Oracle ...

  10. UVM基础之---------uvm factory机制base

    从名字上面就知道,uvm_factory用来制造uvm_objects和component.在一个仿真过程中,只有一个factory的例化存在. 用户定义的object和component types ...