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. YTU 2517: 打倒魔王↖(^ω^)↗

    2517: 打倒魔王↖(^ω^)↗ 时间限制: 1 Sec  内存限制: 128 MB 提交: 231  解决: 112 题目描述 从前有一个王子,他喜欢上了邻国的一个公主.终于有一天他向公主表白了, ...

  2. Cordova 开发 App

    Cordova 是一个开源的移动开发框架.允许你用标准的 Web 技术——HTML5,CSS3 和 JavaScript 做跨平台开发.应用在每个平台的具体执行被封装了起来,并依靠符合标准的 API ...

  3. Redis: Redis on Windows Setup

    ylbtech-Redis: Redis on Windows Setup 1.返回顶部 1. 2. 3. 4. 5. 6. 7. 8. 9. 2.返回顶部   3.返回顶部   4.返回顶部   5 ...

  4. Java Graphics2D类的绘图方法

    Graphics2D继承自Graphics,它扩展了Graphics的绘图功能,拥有更强大的二维图形处理能力,提供对几何形状.坐标转换.颜色管理以及文字布局等更精确的控制. Graphics2D定义了 ...

  5. openstack dnsmasq彭祖

    Openstack dnsmasq配置域名解析,openstackdnsmasq vi /etc/nova/nova.conf 在[DEFAULT]添加 dnsmasq_config_file=/et ...

  6. 07-11 Linux命令操作

    1. 查看当做操作目录位置    > pwd 2. 查看(当前)目录里边的文件内容    > ls                //list    > ls  -l  或ll    ...

  7. GG_DataAccess 数据库访问层使用dapper操作

    3.5.GG_DataAccess 数据库访问层使用dapper操作 和Model实体类同理,tt模板已写好,需要的可加qq群:547765059  自己下载.

  8. 微信扫码下载APK遮罩提示示例

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时,界面显示一片空白,容易误导以为在下载呢.按照当前主流习惯,做一个提示用户在浏览器中打开下载的遮罩.网上很多现成 ...

  9. video 能播放声音不能播放视频，黑屏

    与视频编码格式有关,mp4的视频编码有三种:MPEG4(DivX),MPEG4(Xvid),AVC(H264). 浏览器播放视频的支持有限,MP4格式的视频只支持h.264的视频: 视频编码: AVC ...

  10. 二分图最大匹配(匈牙利算法) POJ 3041 Asteroids

    题目传送门 /* 题意:每次能消灭一行或一列的障碍物,要求最少的次数. 匈牙利算法:把行和列看做两个集合,当有障碍物连接时连一条边,问题转换为最小点覆盖数==二分图最大匹配数 趣味入门:http:// ...