scrollHeight实测

小菜101 小菜101 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 700+累计阅读 717平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-05-22 14:03:18 发布 717 阅读 AI 写同款· GEO 优化 ›
srcollTop、clientHeight、scrollHeight详解 原生js： scrollTop —— 滚动条滚动的距离（注意：不是滚动条距顶端的距离） scrollHeight —— 文档内容的实际高度，包含超出视图溢出的部分 clientHeight —— 窗口可视范围的高度 当clientHeight + scrollTop >= scrollHeight时，表示已经抵达内容的底部了，可以加载更多内容。 scrollTop： 可以通过 window.pageYOffset 或 document.documentElement.scro... 阅读详情

scrollHeight实测

scrollHeight就是不考虑滚动条，将内容全部在页面上展开时的高度，注重要加上 padding，不包括border

– 小菜菜

即 scrollHeight = 实际内容尺寸 + padding

我们来看看在box-sizing分别是content-box 和 border-box 时，scrollHeight的值

content-box时的 scrollHeight

请添加图片描述

border-box时的scrollHeight

请添加图片描述

总结

scrollHeight = 实际内容尺寸 + padding

收录于
前端

当前文章被收录于：

前端
8 篇文章 0 人学习
订阅专栏 查看详情
标签
#前端 #html #javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
优惠券管理 （请设计一个优惠券兑换码生成方案，可以支持20亿以上的唯一兑换码，兑换码长度不超过10，只能包含字母数字，并且要保证生成和校验算法的高效）最后把签名值的后14位、新鲜值（4位）、自增序列（32位）拼接，得到一个50位二进制数，然后与一个较大的质数做异或运算加以混淆，再基于Base32或Base64转码，即可的对兑换码。现在，就剩下防止爆刷了。自增id从1增加到Integer的最大值，可以达到40亿以上个数字，而占用的字节仅仅4个字节，也就是32个bit位，距离50个bit位的限制还有很大的剩余，符合要求！ 阅读详情

相关推荐

微处理器实验报告-实验四

实验四 可编程定时/计数器8253实验 一、实验要求 利用8086外接8253可编程定时/计数器，可以实现方波的产生。 二、实验目的 1、学习8086与8253的连接方法。 2、学习8253的控制方法。 3、掌握8253定时器/计数器的工作方式和编程原理

青竹小轩的博客 5113

秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）

1.scrollWidth：返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。 2.scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。 3.scrollLeft：被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置 4.scrollTop：被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置

weixin_61597234的博客 6236

《寻秦OL》.ani动画逆向解析：二进制结构与Unity重实现

动画文件格式是游戏资源逆向的核心入口，其本质是一组按特定规则组织的二进制数据流。理解魔数识别、字节序、字段对齐与差分编码等底层原理，是解析非标准格式的关键前提。技术价值在于绕过黑盒协议，直接从静态客户端提取可验证的原始语义；典型应用场景包括老游戏复刻、美术资产抢救、引擎跨平台迁移及教学级逆向训练。本文以《寻秦OL》的`.ani`文件为实例，深入剖析其C风格结构布局、GB2312中文命名、16位定点数旋转表示及帧主序差分存储机制，并基于C#在Unity中完成从字节流到AnimationClip的端到端重建，覆

weixin_30368981的博客 641

【JavaScript】scrollTop和scrollHeight在滚动事件中的使用

scrollTop和scrollHeight

小秀的博客 3316

深入理解C语言内存管理：堆与栈的区别

栈是一种遵循后进先出（LIFO）原则的数据结构。在程序中，栈用于存储局部变量、函数的参数以及函数调用时的返回地址等信息。栈的内存管理由操作系统自动进行，每次函数调用时都会在栈上分配一块内存区域，函数执行完毕后，该内存区域会自动释放。在C语言中，堆与栈是两种不同的内存分配方式，各自有着不同的特点和适用场景。栈内存自动管理，访问速度快，但大小有限，适用于存储局部变量和函数调用信息。堆内存由程序员手动管理，适用于存储动态数据结构，大小不受限制，但访问速度较慢，容易导致内存泄漏等问题。

set_one的博客 1582

YOLO26涨点改进 | 独家创新、损失函数改进篇 | TGRS 2025顶刊 | 带来AIoU小目标涨点损失函数，增强了目标检测中对边界框形状和尺寸的敏感度，适合复杂场景和小物体检测中有效涨点

AIoU损失函数通过自适应形状感知和尺寸敏感加权机制，有效解决了YOLO26原生损失函数在小目标检测中的缺陷。实验结果表明，AIoU损失函数在多个数据集上均取得了显著的性能提升，尤其在小目标检测和多任务场景下表现突出。自适应形状感知，对形状差异较大的目标给予更大惩罚，提高边界框拟合精度尺寸敏感加权，对小目标的宽高比例差异给予更大权重，增强模型对小目标特征的学习能力梯度连续性好，即使在IoU=0时仍能提供有效的梯度更新，解决小目标梯度消失问题。

qq_36130719的博客 159

js中关于scrollHeight，scrollwidth,scrollLeft,scrollTop的属性使用

element.scrollHeight属性返回整个元素的总高度， element.scrollWidth属性返回整个元素的总宽度。如果元素没有发生溢出（没出现滚动条），那么scrollHeight和clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的。element.scrollLeft属性表示元素的水平滚动条向右侧滚动的距离，element.scrollTop属性表示元素的垂直滚动条向下滚动的距离。如果没有出现滚动条，那上面的两个属性值就是0。

m0_56132701的博客 2255

Unreal5从入门到精通之一文搞懂Unreal的C++代码编译之谜

我们在开发Unreal项目时，如果时蓝图模板的项目，一般问题不大，因为当你修改完蓝图，点击编译Compile+保存Save，就可以继续开发了。这对于开发者来说也非常友好。但是，如果你使用的C++模板开发项目，代码编译一切都变得魔幻起来，IDE(VS/Rider)里面有编译，编辑器里面也有编译，有什么区别呢？我们来列举几个新手常碰到的问题。1.代码我明明新建了，编辑器里怎么看不到？2.昨天我新家的功能运行的好好的，今天怎么感觉还是老逻辑。或者昨天加的新代码，新蓝图不见了。

TxNet 1606

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

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

何以为皇的博客 4374

C#使用OpenCvSharp+微信模型识别多个二维码

本文介绍了一个基于OpenCvSharp和微信开源二维码检测器的多二维码识别项目。该项目通过C# WinForm实现，主要功能包括：加载图片、识别图片中的多个二维码并显示识别结果。核心代码使用了OpenCvSharp.WeChatQRCode类，通过预训练的caffe模型(detect.prototxt/detect.caffemodel和sr.prototxt/sr.caffemodel)进行二维码检测和解码。识别结果包括每个二维码的编号、内容及位置信息。项目适用于批量二维码识别场景，部署简单，识别效果良

遇见--专栏 124

FPGA实现串口升级及MultiBoot（十)串口升级SPI FLASH实现

采用软核进行串口升级的原因主要有以下几点：1、官方推荐：官方以前也推出了针对逻辑进行升级的程序《XAPP1081_QuickBoot》，但是从今年起（2024年）官方就停止更新相关例程了（详见下面截图），所以采用官方推荐的软核更新；2、简单并具有通用性：针对SPI或者BPI官方都有相关的IP，可应对市场上80%以上的FLASH，并且官方IP通用性极强，只需要修改几个参数就可以对不同厂家的芯片进行升级操作；

OpenFPGA的博客 2000

前端中的scrollHeight 、scrollTop、clientHeight等意思

要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...

jjw_zyfx的博客 4135

基于VLFM的中文指令视觉语言导航系统设计与实现

文章摘要 本文介绍了一个基于VLFM（视觉语言边界地图）的中文指令视觉语言导航系统设计与实现。该系统采用模块化架构，包含三维场景渲染、URDF机器人仿真、VLFM导航引擎、中文指令解析和PyQt图形界面五大核心模块。系统支持自定义GLB场景模型和URDF机器人模型，通过transformers和langchain实现中文自然语言指令解析，利用VLFM算法进行语义导航决策。技术实现上详细介绍了GLB模型加载器开发、URDF机器人控制、VLFM导航算法集成以及PyQt界面设计。该系统在Ubuntu环境下运行，依

AI的内部世界的博客 209

HTML DOM scrollHeight 属性

HTML DOM的scrollHeight是一个只读属性，用于获取元素内容的总高度，包括可见和不可见部分。它常用于检测滚动到底部、实现无限滚动或动态调整元素高度。该属性包含内边距但不包括边框和外边距，与clientHeight（可见区域）和offsetHeight（总高度）有所区别。使用时需注意：内容变化会自动更新值，频繁访问可能影响性能（建议防抖/节流），且仅在设置overflow为auto/scroll时可能大于clientHeight。典型应用包括自适应文本框和内容溢出检测。

likuoelie的博客 1020

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总

一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，今天整体下。 scrollHeight scrollHeight含有scroll当然这个高度与滚动相关。 读写：只读 描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值c...

CaseyWei 7227

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...

qq_35430000的博客 17万+

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员，提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列，各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性，请参见数据手册。有关 ARM Cortex™-M4F 内核的信息，请参见《Cortex™-M4F 技术参考手册》。

彻底搞懂clientHeight、offsetHeight、scrollHeight的区别

日常开发web代码得时候,总是遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别. 1.定义说明 条目 含义 图示 clientHeight 元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距 offsetHeight 元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数 ...

十八酱君 3万+

scrollHeight,clientHeight,scrollTop

移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。 原生js实现思路 需要三个高度： scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、 scrollTop（滚动条滚动距离）、 clientHeight（窗口可视范围高度）。 当 clientHeig

weixin_45439010的博客 1460

clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高.

q1ngqingsky的博客 230

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

1. 总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。 以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。 2. scrollWidth和scrollHeight 2.1 概念 element...

我是张跑跑 1万+

offsetHeight, clientHeight与scrollHeight的区别

在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的，没有测试quirk模式。 clientHeight 大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式

清箫的专栏 3万+

clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop

和scrollTopoffsetTop这个属性返回的是当前元素的外边框到其定位父元素（）的顶部内边距边缘的距离（包含它的外边距margin）。offsetParent元素指该元素的定位元素以及最近的table,td,th,body. 可见，offsetParent和position属性的包含块概念类似.大部分场景下可以通用.

m0_72674495的博客 568

js 中clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height 每个HTML元素都具有clientHeight off...

weixin_41766191的博客 253

offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解 el.offsetHeight = height + padding + border（滚动条是在边框内的，自然也包括在内） el.clientHeight = 可视化看到的高度 (就是content的高度) el.scrollHeight = 整个元素的高度 （ 包括了clientHeig...

zhangx 655

对Javascript中滚动属性(scrollTop,scrollLeft,scrollHeight,scrollWidth)的解释和相关DOM操作

当我们进行网页开发到时候，有时候会出现容器里面的内容超过容器本身高度的情况，这时候就会有滚动，接下来就对有关滚动的相关属性和操作发表一下我个人的观点。 scrollTop:scrollTop指的是“容器中的内容”超出“容器上边界”的那部分我们“看不见的高度”。也就是说scrollTop表示元素向上滚动的尺寸。接下来通过具体事例让我们得出scrollTop和scrollLeft的具体取值范围到底是...

夭夭的博客 4309

scrollTop和scrollHeight

scollTop scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值. 总结：元素发生溢出时可以设置scrollT...

Hero4399的博客 3957
上一篇： 重新认识box-sizing
下一篇： element性能优化之实时计算textarea高度
点赞 0
评论 0
书签 书签 0
小菜101
小菜101
博客等级 码龄10年 16粉丝 92原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值