scrollHeight实测

理解CSS中的scrollHeight：内容尺寸与padding的综合考量
最新推荐文章于 2025-09-20 10:37:08 发布
原创 最新推荐文章于 2025-09-20 10:37:08 发布 · 671 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html #javascript

scrollHeight是指元素内容在不考虑滚动条情况下，加上padding后的总高度。在content-box盒模型中，scrollHeight等于实际内容尺寸加padding；而在border-box模型中，情况有所不同。本文通过实例探讨了两种盒模型下scrollHeight的计算，并总结出scrollHeight的基本公式：scrollHeight=实际内容尺寸+padding。

scrollHeight实测

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

– 小菜菜

即 scrollHeight = 实际内容尺寸 + padding

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

content-box时的 scrollHeight

请添加图片描述

border-box时的scrollHeight

请添加图片描述

总结

scrollHeight = 实际内容尺寸 + padding

无头浏览器爬取终极对比：Puppeteer vs Selenium，性能/易用性实测+场景选型指南
专注于Python爬虫开发，分享爬虫技巧、项目实战与反爬经验，使用Scrapy、BeautifulSoup等工具，解决数据抓取难题。
11-26 802
Puppeteer是“Chrome生态下的性能王者”，适合追求效率、用Node.js开发的场景；Selenium是“跨语言跨浏览器的全能选手”，适合需要兼容性、用Python/Java开发的场景。新手不用纠结“学哪个更好”，可以根据自己的主力语言选择：用Python就从Selenium入手，快速跑通案例；用JS就选Puppeteer，体验高效开发。最后提醒：无头浏览器爬取时，一定要控制请求频率，避免给目标网站造成压力，同时遵守网站的robots协议和用户协议，合法合规爬取数据。
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
CheyBen的博客
01-08 3115
MDN文档 首先：每个HTML元素都具有clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 这5个和元素高度、滚动、位置相关的属性。 clientHeight和offsetHeight属性表示元素的高度，和元素的滚动、位置没有关系。 返回值未因浏览器区别存在差异的属性： clientHeight、clientWidth、 ...
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）
小苏(º﹃º )的博客
10-21 2937
https://juejin.cn/post/6844903861212168200
HTML DOM scrollHeight 属性
likuoelie的博客
09-20 911
HTML DOM的scrollHeight是一个只读属性，用于获取元素内容的总高度，包括可见和不可见部分。它常用于检测滚动到底部、实现无限滚动或动态调整元素高度。该属性包含内边距但不包括边框和外边距，与clientHeight（可见区域）和offsetHeight（总高度）有所区别。使用时需注意：内容变化会自动更新值，频繁访问可能影响性能（建议防抖/节流），且仅在设置overflow为auto/scroll时可能大于clientHeight。典型应用包括自适应文本框和内容溢出检测。
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
热门推荐
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
18.网页尺寸scrollHeight
weixin_34288121的博客
03-10 133
scrollHeight和scrollWidth，获取网页内容高度和宽度(不包括滚动条)。 一、针对IE、Opera: scrollHeight 是网页内容实际高度，可以小于 clientHeight。 二、针对NS、FF: scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight...
关于scrollHeight
antelope_2014的博客
11-29 217
scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度 scrollHeight=滚动条可滚动的部分+border的高度+横向滚动条不可用的高度；在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如...
WebFont性能瓶颈破解：结合Detect Font插件优化字体加载，提速80%实测方案
!... # 摘要 WebFont在提升网页视觉表现的同时，也带来了显著的性能挑战，尤其是在加载速度和渲染效率方面。本文系统分析了WebFont加载机制及其对关键性能指标（如首屏渲染时间与首次内容绘制）的影响，深入探讨了字体...
但是实际情况是 resizeTextarea() 方法已经被成功触发了, 但是高度还是没有随着内容撑开
最新发布
11-26
> 实测中，某些复杂组件（如 Element UI 的 `el-input[type=textarea]`）需要两个 tick 才能正确测量。 --- ### 2. 检查 `autosize` 是否启用且配置正确 确保你的 `el-input` 启用了正确的 `autosize` 配置： ``...
el-table使用dom-to-image转成图片并下载，结果下面不全
07-23
根据用户的问题，用户在使用`dom-to-image`将`el-table`转换为图片时出现显示不全的问题。...> 实测数据：在10,000行数据量下，上述方案导出时间约8-12秒（Chrome环境），内存占用稳定在1.5GB以内[^1][^2]。
网页尺寸scrollHeight
qq_24193261的博客
09-19 543
scrollHeight和scrollWidth,获取网页内容高度和宽度 一。针对IE,Opera: scrollHeight是网页内容实际高度，可以小于clienHeight. 二。针对NS,FF： scrollHeight是网页内容的高度，不过最小值是clientHeight.也就是说网页内容实际高度小于clientHeight时，scrollHeight返回clientHeight.
页面scroll的高度
weixin_42729843的博客
02-28 728
在做项目时有很多时候需要根据页面的scroll高度做一些操作 获取某元素的的高度：element.clientHeight 获取视图的滚动高度：element.scrollTop（菜鸟的解释：返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离） 滚动到指定元素（better-scroll）：this.scroll.scrollToElement(element) ...
前端中的scrollHeight 、scrollTop、clientHeight等意思
jjw_zyfx的博客
10-25 4070
要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...
获取页面scroll高度
weixin_30332241的博客
03-04 1863
记录一下获取 scroll 高度的方法 经实际测试: document.body.scrollTop 在 chrome 下会返回0. 所以 document.documentElement.scrollTop 或者 window.pageYOffset 需要一起判断, 做一下兼容 var scrollTop = window.pageYOffset || document.documentElem...
秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
weixin_61597234的博客
12-07 6031
1.scrollWidth：返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。 2.scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。 3.scrollLeft：被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置 4.scrollTop：被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置
scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解
HYD2000_1977的博客
10-10 262
开发中经常遇到使用scrollHeight、scrollTop、clientHeight、offsetHeight等的情况，网上有众多关于这些属性的解释，但是并不全面和直观，现在将这些属性结合图例整理如下，方便日后查阅： DOM元素对象 clientHeight 返回当前元素在页面上的可视高度（包括padding；不包括border、margin、滚动条高度） 单位p...
scrollHeight,clientHeight,scrollTop
weixin_45439010的博客
11-19 1422
移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。 原生js实现思路 需要三个高度： scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、 scrollTop（滚动条滚动距离）、 clientHeight（窗口可视范围高度）。 当 clientHeig
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值