clientHeight、scrollHeight、offsetHeight的区别和理解

2024-04-18 06:31:30

说的再多也比不上一个例子好理解—看图

目前页面是停留在蓝色区域的，下面的是看不见的，蓝色区域包满了整个可视区屏幕
蓝色区域为我们可视化的区域，红色边框包围的为总页面的区域即红粉黄的高度和
现在scrollHeight = 红色边框的高度 （若没固定高度，会随着内容改变）内容的实际高度+上下padding
clientHeight= 蓝色区域的高度 （相当于我们可视化的高度，这是固定的）（height+padding，不包含边框）
offsetHeight 和 clientHeight差不多，不过它包含了边框 这里我们没有设置边框所以它们是相等的
再多介绍一个scrollTop帮助大家更好理解
scrollTop 蓝色区域离顶部的距离现在毫无疑问是 0
假设每个颜色区域的高度为250px 则
scrollHeight = 750px
clientHeight= 250px
offsetHeight = 250px
scrollTop = 0px

例子：知道到达底部了

现在我们滑动页面到最底端也就是现在屏幕被黄色区域所包满
则现在的值是多少呢？
scrollHeight = 750px
clientHeight= 250px
offsetHeight = 250px
这些值应该是不变的因为我们这里模拟的是高度固定自然不会变化那scrollTop呢？
之前在顶部时:scrollTop = 0px
现在：scrollTop = 蓝色高度+粉色高度 = 500px
则到底顶部为: scrollHeight - clientHeight = scrollTop
如果有边框则换成 offsetHeight

如有不当之处请下方留言

clientHeight、scrollHeight、offsetHeight的区别和理解相关推荐

clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
这该死的高度,height,clientHeight,scrollHeight,offsetHeight
引言: 虽然有时候界面的设置不是我们这些后台代码人员的工作,但是有时候却难以理解控件生成时的一些怪事,比方在学习webabcd的扩张GridView中固定列时,你或许已经被其中的height,clie ...
height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
heigh,clientHeight , scrollHeight , offsetHeight介绍
height是element元素部分属性,值为字符型,而其他三种的值为数字型,JS获取方式document.body.style.height,如果写成document.body.height会提示u ...
关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
浏览器窗口尺寸clientHeight / scrollHeight / offsetHeight / innerHeight
https://www.cnblogs.com/nanshanlaoyao/p/5964730.html clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取 ...
彻底搞懂clientHeight、offsetHeight、scrollHeight的区别
我们开发web代码的时候,经常回遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别. 1.定义说明条目含义图示 clientHeight ...
clientHeight、offsetHeight 和 scrollHeight
2019独角兽企业重金招聘Python工程师标准>>> window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeig ...
再次详解clientHeight、offsetHeight、scrollHeight
关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.avail ...
scrollHeight, clientHeight, offsetHeight的区别
浏览器窗口和网页文档先明确浏览器窗口和网页文档的区别,拿下面这张图来说右边那张图中,大红色方框框起来的是浏览器窗口,而网页文档就是左边这张图.先不用去管scrollHeight这些东西,后面再解释 ...

最新文章

热门文章