clientHeight offsetHeight scrollHeight offsetTop scrollTop的区别

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量123 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45117943/article/details/118387776
版权

clientHeight 表示的是你肉眼见到的内容的高度。比如一个iframe标签你嵌套了一个百度的地址，这时候浏览器会给iframe一个默认高度，这个高度小于百度页面的高度就会出现滚动条，拖动上下滚动条你才能看完整个百度页面，也就是说你拖动滚动条才能看完整个百度也买呢的高度。这个默认高度减去上下边框和内边距就是clientHeight。

scrollHeight 表示整个完整内容的高度。还是上面那个例子，这个scrollHeight相当于你拖动滚动条以后看见一个完整百度页面的高度就是scrollHeight

scrollTop 表示你在停止拖动滚动条以后，完整页面被你卷去的内容的高度，也就是你向下拖动时候页面向上滚动了多高

offsetHeight 的值是clientHeight的值加上加上内边距和上下边框的值

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系

一个想进字节的菜鸡前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
10-15
JavaScript中的几个关键属性——scrollTop、scrollHeight、offsetTop和offsetHeight，对于网页动态效果和页面交互的实现至关重要。这些属性都是用来处理元素在视口中的位置以及可滚动内容的尺寸。 1. scrollTop属性...
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
10-28
在JavaScript中，`top`、`clientTop`、`scrollTop`和`offsetTop`都是用于处理元素位置和滚动状态的属性，它们各自有着特定的用途和含义。理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `...
彻底分清clientHeight，scrollHeight，offsetHeight，clientTop，scrollTop，offsetTop的区别
dongdaxiaopenyou的博客
09-06 1万+
clientHeight，scrollHeight，offsetHeight clientHeight: 可理解为内部可视区高度，样式的height+上下padding scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight） offsetHei...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop，innerWidth, innerHeight
weixin_43550562的博客
07-20 257
一张图直接理解InnerWidth和Innerheight的区别 // 获取窗口的高度与宽度(不包含工具条与滚动条): var innerWidth = window.innerWidth var innerHeight = window.innerHeight console.log(innerWidth,innerHeight)...
搞清楚 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
辉生活-记录程序生活的点滴。
04-23 153
网页可见区域高：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、scrollTop的区别以及上拉加载的实现
weixin_40380115的博客
06-11 1705
在前端的项目中，为了提高性能经常会使用到上拉加载，、、、是实现上拉 加载的关键。所以，首先来介绍下三者的意义以及区别。 ：表示的是当前显示的元素的高度，如果存在X轴的滚动条与根元素边框，不包括X轴的滚动条与根元素边框的高度 。 ：也表示的是当前显示元素的高度，与clientHeight类似，但offsetHeight包括X轴的滚动条与根元素边框的高度。 ：表示内容区域的整个高度，包括溢出的内容区域，即滚动条的 高度。 ：表示的是滚动条滚动的高度，初始未滚动时的高度为0。 具体如下图所示： 有上图可知：of
scrollTop、offsetHeight和offsetTop等属性用法详解以及兼容性的解决
冰雪为融的博客
03-09 8703
下面有每个属性详细的解释网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidt...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 16万+
转载自：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
song854601134的博客
12-12 194
clientHeight和offsetHeight clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHei
页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
12-11
例如，通过`scrollTop`和`scrollHeight`可以判断元素是否已滚动到底部，从而触发加载更多内容的事件。而`offsetTop`和`offsetHeight`则可用于计算元素在屏幕中的位置，实现如悬浮按钮等效果。理解并熟练运用这些属性...
各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight...
weixin_30525825的博客
08-26 431
1、.position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left； jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 244
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 100
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 878
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 206
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 182
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 304
vue2、vue3首屏优化,减少白屏时间
[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释
06-07
这些属性都与元素的尺寸相关。 - `offsetHeight`：元素在垂直方向上占据的空间大小，包括元素的高度、上下边框...需要注意的是，`clientHeight`和`scrollHeight`还会受到CSS样式的影响，比如`box-sizing`属性的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值