clientHeight、offsetHeight、offsetTop、scrollHeight、scrollTop

最新推荐文章于 2024-05-20 10:22:47 发布
最新推荐文章于 2024-05-20 10:22:47 发布
阅读量284 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/joe_324/article/details/113526085
本文详细解释了CSS中常用的元素尺寸属性，如clientHeight、offsetHeight、offsetTop、scrollHeight及scrollTop等的区别与应用。这些属性可以帮助开发者更好地理解和控制网页布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

clientHeight和offsetHeight属性只表示元素的高度

clientHeight 只读元素

当前可见部分的高度
包括padding，但不包括border、水平滚动条、margin的元素的高度。
对于inline的元素这个属性一直是0，单位px。

offsetHeight 只读元素

包括padding、border、水平滚动条，但不包括margin的元素的高度。
对于inline的元素这个属性一直是0，单位px。

offsetTop 只读元素

当前元素顶部距离最近父元素顶部的距离。
和有没有滚动条没有关系，单位px。

当本元素的子元素比本元素高且overflow=scroll时，本元素就会scroll

scrollHeight 只读元素

有滚动条时，当前可见部分的高度 + 不可见部分的高度。
没有滚动条时，scrollHeight==clientHeight恒成立，单位px。

scrollTop 可读可设置元素

有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。
没有滚动条时，scrollTop==0恒成立，单位px。

参考链接：点击进入

joe_324
关注
pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
m0_56029970的博客
09-01 163
JavaScript尺寸和位置的理解，外加简易滑动条实例
页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
12-11
例如，通过`scrollTop`和`scrollHeight`可以判断元素是否已滚动到底部，从而触发加载更多内容的事件。而`offsetTop`和`offsetHeight`则可用于计算元素在屏幕中的位置，实现如悬浮按钮等效果。理解并熟练运用这些属性...
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 17万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
Mr_linjw的专栏
03-04 286
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度
详解clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
zag666的博客
10-27 1125
clientHeight： 内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。包括padding但不包括border、水平滚动条、margin的元素的高度。 scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）。 IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 NS、FF 认为 scr...
scrollTop
weixin_56815226的博客
10-18 577
scrollTop：代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。clientHeight：视野可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距；offsetHeight：在clientHeight的基础上， 加上边框和滚动条的高度；scrollHeight：所有的内容(包括肉眼看不见、溢出、被窗口遮挡的部分；
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义
weixin_43799793的博客
03-11 765
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义 如图所示： 二、详细介绍这几个概念 接着，我们来逐步了解一下这几个概念。 ①网页可见区域高：document.body.clientHeight； ②网页正文全文高：document.body.scrollHeight； ③网页可见区域高（包括边线的高）：document.body.offsetHeight； ④网页被卷去的高：document.body.scrollTop；
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
【JS】scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
cannotbecounted的博客
11-08 630
scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
clientHeight offsetHeight scrollHeight offsetTop scrollTop的区别
读心悦
04-20 332
在HTML中，每个元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop属性。 clientHeight和offsetHeight表示元素的高度。 clientHeight：包含了padding但是不含border，水平滚动条，margin的高度。对于没有定义CSS或者是内联（inline）布局盒子的元素，clientHe...
offsetTop、clientHeight、scrollTop等属性的含义
最新发布
qq_53895518的博客
05-20 629
包含元素的引用保存在offsetParent属性中，不一定是parentNode，比如的offsetParent是，因为它是DOM层次中距最近的一个具有大小的元素。所有的偏移量属性都是只读的，而且每次访问都要重新计算，避免重复访问。四、innterHeight和outerHeight。这两个属性也是只读和需要重新计算的。二、客户区大小-以client开头的。一、偏移量-以offset开头的。三、滚动大小-scroll开头的。
scrollTop、offsetHeight、offsetTop、 clientHeight等属性用法详解
LRQQHM的博客
09-22 4933
下面有每个属性详细的解释 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.b
offsetHeight, scrollTop, scrollHeight的区别
To_Be_Better0822的博客
06-29 566
offsetHeight offsetHeight 是一个只读属性，返回一个元素的高度（包括padding,border）。 如果元素设置为display:none，将返回0。 This property will round the value to an integer. If you need a fractional value, use element.getBoundingClien...
clientHeight、offsetHeight、scrollHeight、scrollTop的区别以及上拉加载的实现
weixin_40380115的博客
06-11 2237
在前端的项目中，为了提高性能经常会使用到上拉加载，、、、是实现上拉 加载的关键。所以，首先来介绍下三者的意义以及区别。 ：表示的是当前显示的元素的高度，如果存在X轴的滚动条与根元素边框，不包括X轴的滚动条与根元素边框的高度 。 ：也表示的是当前显示元素的高度，与clientHeight类似，但offsetHeight包括X轴的滚动条与根元素边框的高度。 ：表示内容区域的整个高度，包括溢出的内容区域，即滚动条的 高度。 ：表示的是滚动条滚动的高度，初始未滚动时的高度为0。 具体如下图所示： 有上图可知：of
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
weixin_42522400的博客
06-24 464
全文参考：https://github.com/iuap-design/blog/issues/38 、MDNclientHeight，只读clientHeight可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算。如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(pad...
图解初识JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop概念
qq_26780317的博客
04-10 3795
前言：clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop这几个概念，在网上浩如烟海的文章中基本上都是文字解释，工具书中给出的图解也有些晦涩难懂，很难想象具体在窗口中的哪一部分。这次通过在网上查阅一些资料，在此mark一下，给出下文的图文相关解释。 一、整体初印象 首先，我们先来看一张图片，对这几个概念有一些初步的印象： 二...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值