clientHeight、offsetHeight、offsetTop、scrollHeight、scrollTop

最新推荐文章于 2024-05-20 10:22:47 发布
原创 最新推荐文章于 2024-05-20 10:22:47 发布 · 292 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了CSS中常用的元素尺寸属性，如clientHeight、offsetHeight、offsetTop、scrollHeight及scrollTop等的区别与应用。这些属性可以帮助开发者更好地理解和控制网页布局。

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
关注
offsetTop、clientTop、scrollTop、offsetHeight、clientHeight、scrollHeight概念结合图片理解
鸭绒的博客
05-19 604
首先说一下学习这几个属性的感受，WHAT?这些概念怎么都差不多啊，这怎么区分？我也晕了好久，今天我偏重实际效果图来理解这几个玩意。这里分document.body和div来讲解。 一、div部分 先上我们用来理解属性的代码 <div class="container" id="container"> <article> 一、没遇见你之前，我，随遇而安，遇见你之后，我，以你为安。 二、你是我今生渡不过的劫，多看一眼就心软，拥抱一下就沦陷！
pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
m0_56029970的博客
09-01 231
JavaScript尺寸和位置的理解，外加简易滑动条实例
搞清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
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
Mr_linjw的专栏
03-04 329
网页可见区域高：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 1300
clientHeight： 内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。包括padding但不包括border、水平滚动条、margin的元素的高度。 scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）。 IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 NS、FF 认为 scr...
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
10-15
JavaScript中的几个关键属性——scrollTop、scrollHeight、offsetTop和offsetHeight，对于网页动态效果和页面交互的实现至关重要。这些属性都是用来处理元素在视口中的位置以及可滚动内容的尺寸。 1. scrollTop属性...
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
CheyBen的博客
01-08 3122
MDN文档 首先：每个HTML元素都具有clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 这5个和元素高度、滚动、位置相关的属性。 clientHeight和offsetHeight属性表示元素的高度，和元素的滚动、位置没有关系。 返回值未因浏览器区别存在差异的属性： clientHeight、clientWidth、 ...
scrollTop
weixin_56815226的博客
10-18 595
scrollTop：代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。clientHeight：视野可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距；offsetHeight：在clientHeight的基础上， 加上边框和滚动条的高度；scrollHeight：所有的内容(包括肉眼看不见、溢出、被窗口遮挡的部分；
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义
weixin_43799793的博客
03-11 799
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义 如图所示： 二、详细介绍这几个概念 接着，我们来逐步了解一下这几个概念。 ①网页可见区域高：document.body.clientHeight； ②网页正文全文高：document.body.scrollHeight； ③网页可见区域高（包括边线的高）：document.body.offsetHeight； ④网页被卷去的高：document.body.scrollTop；
【JS】scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
cannotbecounted的博客
11-08 723
scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
clientHeight offsetHeight scrollHeight offsetTop scrollTop的区别
读心悦
04-20 435
在HTML中，每个元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop属性。 clientHeight和offsetHeight表示元素的高度。 clientHeight：包含了padding但是不含border，水平滚动条，margin的高度。对于没有定义CSS或者是内联（inline）布局盒子的元素，clientHe...
offsetTop、clientHeight、scrollTop等属性的含义
最新发布
qq_53895518的博客
05-20 713
包含元素的引用保存在offsetParent属性中，不一定是parentNode，比如的offsetParent是，因为它是DOM层次中距最近的一个具有大小的元素。所有的偏移量属性都是只读的，而且每次访问都要重新计算，避免重复访问。四、innterHeight和outerHeight。这两个属性也是只读和需要重新计算的。二、客户区大小-以client开头的。一、偏移量-以offset开头的。三、滚动大小-scroll开头的。
scrollTop、offsetHeight、offsetTop、 clientHeight等属性用法详解
LRQQHM的博客
09-22 4984
下面有每个属性详细的解释 网页可见区域宽：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 580
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 2360
在前端的项目中，为了提高性能经常会使用到上拉加载，、、、是实现上拉 加载的关键。所以，首先来介绍下三者的意义以及区别。 ：表示的是当前显示的元素的高度，如果存在X轴的滚动条与根元素边框，不包括X轴的滚动条与根元素边框的高度 。 ：也表示的是当前显示元素的高度，与clientHeight类似，但offsetHeight包括X轴的滚动条与根元素边框的高度。 ：表示内容区域的整个高度，包括溢出的内容区域，即滚动条的 高度。 ：表示的是滚动条滚动的高度，初始未滚动时的高度为0。 具体如下图所示： 有上图可知：of
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
weixin_42522400的博客
06-24 487
全文参考：https://github.com/iuap-design/blog/issues/38 、MDNclientHeight，只读clientHeight可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算。如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(pad...
JavaScript滚动属性详解：scrollTop、scrollHeight、offsetTop与offsetHeight
"这篇学习笔记主要探讨了JavaScript中与页面滚动相关的几个重要属性：scrollTop、scrollHeight、offsetTop和offsetHeight。这些属性在处理页面布局和动态效果时扮演着重要角色，尤其对于开发者来说，理解它们的工作...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值