scrollTop clientHeight

最新推荐文章于 2025-02-27 10:28:00 发布

LifeFuture1994

最新推荐文章于 2025-02-27 10:28:00 发布

阅读量239

点赞数

分类专栏：前端文章标签： js

前端专栏收录该内容

190 篇文章

订阅专栏

本文详细解析了clientHeight和scrollHeight的区别与联系，解释了它们如何反映网页元素的可视高度和实际高度，以及在滚动操作中如何使用这些属性判断滚动状态。

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

https://www.cnblogs.com/zhwc-5w4/p/7183217.html

clientHeight: 可理解为内部可视区高度，样式的height+上下padding(本例即220）。

scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

滚动时通常我们只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离，否则就是滚动过头了（手机上的上下拉取）！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LifeFuture1994

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

手写一个滚动加载，scrollHeight、scrollTop与clientHeight傻傻分不清

weixin_38434088的博客

03-22

928

文章目录前言一、scrollHeight? scrollTop? clientHeight？二、实现步骤1.HTML&CSS部分2.js部分总结前言这是某厂的一道前端笔试题，做题的时候对滚动相关的这几个参数搞混了导致没能实现滚动加载的效果，在这里记录一下。提示：以下是本篇文章正文内容，下面案例可供参考一、scrollHeight? scrollTop? clientHeight？一图胜千言，下面直接上图来区分三个属性蓝色部分可以看见的窗口部分，clientHeight代表了这块的

详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

01-18

参与评论您还未登录，请先登录后发表或查看评论

根据例子来理解scrollHeight,clientHeight,scrollTop的区别

01-14

包含以下内容： function test(){ var infoHeight = document.getElementById(”info”).scrollHeight; //scrollHeight 为层实际的高度，有实际有多高就多高，与当前网页高度无关。

浏览器滚动条 clientHeight、offsetHeight、scrollTop。

黄彪博客

09-07

582

文章参考 http://www.jb51.net/article/57614.htm http://www.jb51.net/article/58688.htm http://www.internetke.com/tutorial/js/2014/0523/560.html 需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。

关于offsetTop，scrollTop，scrollHeight，clientHeight

xiaobaiya___的博客

01-15

781

scrollTop：可视区域顶部到文档流顶部的距离，也是滚动条滚动的距离。offsetTop：元素到offsetParent顶部的距离。scrollHeight：文档内容实际高度，clientHeight：窗口可视范围高度。包括超出视窗的溢出部分。

JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍

何以为皇的博客

10-25

4084

获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...

scrollTop clientHeight scrollHeight 代表什么

06-14

vue项目设置scrollTop不起作用(总结)

10-17

本文总结了在Vue项目中设置scrollTop不起作用的问题，并提供了解决方案。问题描述：在开发过程中，当页面内容较长，分为多个模块，每个模块都有对应的标题，点击标题后需要滚动到相应模块内容位置。为了实现这一...

wrap.scrollTop + wrap.clientHeight === wrap.scrollHeight判断到底无效

最新发布

07-05

具体是询问为什么条件 `wrap.scrollTop + wrap.clientHeight === wrap.scrollHeight` 无效，以及解决方法和原因。参考用户提供的引用： - 引用[1]：解释了scrollHeight、clientHeight、scrollTop的含义，并给出了...

【javascript】clientHeight，offsetHeight，scrollHeight，scrollTop的理解，以及触底函数

前端学习记录

09-19

667

通常使用 clientHeight+ scrollTop >= scrollHeight 来判断是否触底。含义：元素的像素高度包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数。含义：元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距。含义：元素内容的高度，包括溢出的不可见内容。含义：元素滚动到屏幕上面不可见区域高度。

看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight

xyjikl

12-10

418

每次用JS获取页面的高宽时总都是相当的揪心，同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同。以下就针对页面的实际高宽和可见区域做个总结，以便大家查阅！ 1. 在W3C标准的情况下 W3C标准页面，即在HTML代码头部加入在IE中： document.body.clientWidth ==> BODY对象宽度 document.bod

scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight区别

weixin_43993776的博客

06-02

631

scrollHeight会随着子元素的高度变化而变化，即使自身固定高度出现滚动轴，包括padding和子元素撑大的部分scrollTop指的是元素的滚动距离，可读可写的一个属性

花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight

qq_40574071的博客

07-20

2010

一、经典图解读先放上一张经典图看不懂，没关系！接下来耐心看完必然有不一样的收获。我们常遇到的是实际是这么几个属性： offsetTop clientHeight scrollTop scrollHeight 如果不把它们弄清楚就会导致每次遇到时都混淆不清，下面就逐一看看这么些属性。（1）offsetTop HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。--MDN 【巧记】offset本身就是..

scrollTOP scrollLeft clientHeight clientWidth 的各浏览器版修正

meizz的专栏

03-21

9822

var bodySL, bodyST;if(window.pageXOffset){ bodySL=window.pageXOffset;}else if(document.documentElement&&document.documentElement.scrollLeft){ bodySL=document.documentElement.scrollLeft;}else if(

offsetTop、clientHeight、scrollTop等属性的含义

qq_53895518的博客

05-20

639

包含元素的引用保存在offsetParent属性中，不一定是parentNode，比如的offsetParent是，因为它是DOM层次中距最近的一个具有大小的元素。所有的偏移量属性都是只读的，而且每次访问都要重新计算，避免重复访问。四、innterHeight和outerHeight。这两个属性也是只读和需要重新计算的。二、客户区大小-以client开头的。一、偏移量-以offset开头的。三、滚动大小-scroll开头的。

clientHeight / scrollHeight / offsetHeight 等属性的区别图

liuysheng的专栏

09-22

1425

取document.body.scrollTop 值时一直为0, 是因为：页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.

JS篇-DOM上的尺寸及位置

Fhdnkxldnbx的博客

02-09

1279

相信当家对DOM元素上的尺寸及位置属性一定不陌生，常见的clientHeight、offsetHeight等属性在日常开发中会经常用到，但也会常常忘记各个属性具体的边界情况。本文整理了DOM元素上的尺寸及位置属性，方便大家日后在使用过程中能快速回想起各个属性的边界。

记font-family的坑（clientHeight 和 scrollHeight 不相等）

weixin_45143856的博客

11-30

433

组件封装 font-family的坑 clientHeight 和scrollHeight 不相等

JavaScript--scrollTop，clientHeight，offsetHeight，scrollHeight，offsetTop的案例

weixin_42017221的博客

02-27

169

【代码】JavaScript--scrollTop，clientHeight，offsetHeight，scrollHeight，offsetTop的案例。