文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文围绕《Modern JavaScript Tutorial》en.javascript.info 仓库中“元素尺寸与滚动”章节的一道经典编程任务展开给定任意一个可滚动元素elem如何求出它底部还有多少内容没有被滚动出来即scrollBottom。任务要求代码对任意元素通用并且在没有滚动、或元素已经滚动到底时返回0。读完本文你将掌握scrollTop、scrollHeight、clientHeight三个几何属性的语义与组合公式并能够将其直接应用到“滚动到底检测”“回到顶部按钮”“无限加载触发”等真实场景中。任务背景来自官方练习集的真实考题本任务位于仓库的 2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/ 目录对应的文档是 task.md重要性标记为importance: 5满分 5属于该章节最高优先级练习。它承接同目录 article.md 中关于scrollLeft/scrollTop、scrollWidth/scrollHeight、clientWidth/clientHeight等几何属性的完整讲解是检验读者是否真正理解“已滚动出去的部分”与“可见部分”关系的核心考题。任务原文要求可以概括为三点elem.scrollTop表示从顶部被滚动出去隐藏的那部分尺寸请写出能求出底部滚动尺寸称为scrollBottom的代码代码必须对任意elem通用且满足边界条件没有滚动时或元素已完全滚到底时结果应为0。三个核心几何属性回顾在推导scrollBottom公式之前先明确三个参与运算的属性在官方文档中的定义见 article.md 的“scrollWidth/Height”与“scrollLeft/scrollTop”小节属性含义是否可写elem.scrollTop元素内容从顶部滚动出去隐藏的部分的高度即“向上滚动了多少”可写赋值会让浏览器滚动元素elem.scrollHeight内容的完整内部高度包含滚动出去不可见的部分若没有水平滚动scrollWidth则等于clientWidth只读elem.clientHeight边框内侧的内容区高度内容 上下内边距不含滚动条只读从几何上看一个可纵向滚动的元素其scrollHeight在竖直方向上被切分为三段顶部已滚出部分——由scrollTop表示当前可见部分——由clientHeight表示边框内侧、不含滚动条的内容区底部尚未滚出的部分——这正是我们要计算的scrollBottom。核心公式scrollBottom scrollHeight - scrollTop - clientHeight官方给出的解答见 solution.md只有一行let scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight;其含义就是官方注释所说的完整高度scrollHeight减去从顶部滚出的部分scrollTop再减去当前可见的部分clientHeight剩下的恰好是从底部尚未滚出的部分。// 完整高度 - 顶部滚出部分 - 可见部分 底部滚出部分 let scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight;边界条件验证任务要求特别强调两条边界条件可以逐条验证没有滚动时此时scrollTop 0且内容没有溢出scrollHeight clientHeight或近似相等于是scrollHeight - scrollTop - clientHeight 0结果正确返回0。已完全滚到底时此时scrollTop scrollHeight - clientHeight可滚动的最大距离代入公式得到scrollHeight - (scrollHeight - clientHeight) - clientHeight 0结果同样为0。因此该公式天然满足任务中“无滚动或已滚到底都返回 0”的要求无需额外分支判断。公式背后的源码级原理支撑这个公式并非凭空设计它完全由 article.md 中逐一定义的几何属性推导而来。理解每个属性的精确边界是写出正确代码的前提scrollHeight包含隐藏内容官方文档在“scrollWidth/Height”小节指出这两个属性“像clientWidth/clientHeight但额外包含滚动出去隐藏的部分”。对文中的示例元素300px宽、200px高、25px边框、20px内边距、overflow: autoscrollHeight 723是包含被滚出部分的完整内容内部高度由于没有水平滚动scrollWidth 324恰好等于clientWidth。scrollTop只统计顶部已滚出量文档在“scrollLeft/scrollTop”小节明确说明scrollTop是“向上滚动了多少”即从元素左上角开始被滚动隐藏的部分的高度并且它是少数可写的几何属性——设置elem.scrollTop 10会让浏览器把内容向下滚动10px设置scrollTop 0或scrollTop 1e9可以分别把元素滚到最顶与最底。clientHeight是可见区尺寸文档在“clientWidth/Height”小节指出它提供边框内侧区域的尺寸包含内容与内边距、但不含滚动条。正因为滚动条占用了空间示例元素的clientWidth才会从 CSS 的300px变为284px。把三段定义叠加即可得到与本任务完全一致的几何模型完整高度被“顶部已滚出”和“可见区”瓜分之后余量即“底部待滚出”。实战代码可用于任意元素的通用实现任务要求“对任意elem通用”。下面是一个可直接复制的完整实现包含对边界条件的断言验证/** * 返回元素底部尚未滚动出来的部分的高度px。 * 若元素没有滚动或已经滚动到底则返回 0。 * param {HTMLElement} elem 任意可滚动的 DOM 元素 * returns {number} 底部剩余滚动距离单位为像素 */ function getScrollBottom(elem) { return elem.scrollHeight - elem.scrollTop - elem.clientHeight; } // 使用示例滚动到底检测 function isScrolledToBottom(elem) { return getScrollBottom(elem) 0; }在真实页面中典型用法是监听元素的scroll事件判断是否到达底部并触发加载更多const list document.getElementById(message-list); list.addEventListener(scroll, () { if (list.scrollHeight - list.scrollTop - list.clientHeight 0) { // 已经滚动到底部加载下一页数据 loadMoreMessages(); } });注意公式中参与运算的scrollTop、scrollHeight、clientHeight都是数字像素值这与getComputedStyle返回的带px后缀的字符串不同可直接用于计算无需任何解析这一差异在该章节的另一个任务 6-width-vs-clientwidth/task.md 中有系统总结。常见陷阱与注意事项结合 article.md 与同目录其他练习使用该公式时有几个易错点需要留意滚动条占用空间部分浏览器如 Windows 桌面版 Chrome、Edge会为滚动条预留空间把它从内容宽度中扣除因此clientWidth/clientHeight反映的是“去掉滚动条后”的可见区尺寸少数浏览器则让半透明滚动条悬浮于内容之上。本文公式基于纵向滚动clientHeight不含滚动条高度与scrollHeight、scrollTop的量纲保持一致可放心使用。元素必须处于显示状态几何属性只对已显示的元素计算。若元素或其祖先display:none或元素尚未插入文档则scrollHeight、clientHeight等都会是0公式结果会失真。对隐藏元素的尺寸测量可参考官方给出的isHidden判断思路!elem.offsetWidth !elem.offsetHeight。浮点与亚像素在部分高分屏或缩放场景下各属性值可能是带小数的像素值直接用 0判断“是否到底”在极个别情况下可能不命中可改用 1之类的容差判断增强健壮性。不要用getComputedStyle读取尺寸做这类计算官方文档专门用一节强调CSS 的width/height受box-sizing影响对内联元素可能返回auto且不同浏览器对滚动条的处理不一致Chrome 返回扣除滚动条的真实宽度Firefox 返回 CSS 宽度因此涉及滚动距离的计算应始终依赖几何属性而非 CSS 计算样式。关联练习与延伸阅读本任务属于 2-ui/1-document/09-size-and-scroll/ 章节练习系列与之配套、可一并巩固的知识点包括scrollbar-width 任务通过offsetWidth - clientWidth动态测量滚动条宽度思路与本任务的“量纲拆分”一脉相承put-ball-in-center 任务综合运用clientWidth/clientHeight等几何属性用 JavaScript 把任意尺寸的球定位到任意尺寸容器中心width-vs-clientwidth 任务系统梳理getComputedStyle(elem).width与elem.clientWidth的至少 4 点差异理解为何滚动相关计算应使用几何属性。主文档 article.md 还附带了多张几何示意图如 metric-scroll-top.svg、metric-scroll-width-height.svg、metric-client-width-height.svg建议配合阅读直观理解scrollTop、scrollHeight与clientHeight三者在元素内部的几何位置。小结scrollBottom的通用计算公式为elem.scrollHeight - elem.scrollTop - elem.clientHeight该公式对任意元素通用且天然满足“无滚动 / 已滚到底 → 返回 0”的边界要求核心前提是准确理解三个属性的语义scrollHeight含隐藏内容、scrollTop只统计顶部滚出量、clientHeight是去除滚动条后的可见区尺寸实际开发中可直接将公式用于滚动到底检测、无限加载、回到顶部按钮显隐等场景。如需在线验证可参照官方仓库的演示方式在浏览器控制台中对任意可滚动元素调用getScrollBottom(elem)并滚动观察返回值变化。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript 检测页面滚动到底部bottomVisible 的 scrollHeight、clientHeight 与 scrollY 实战JavaScript 检测页面滚动到底部bottomVisible 的 scrollHeight、clientHeight 与 scrollY 实战 导读 在教程文档为什么选择seresnextaa201d_32x8d.sw_in12k_ft_in1k_38487.30% top-1准确率的秘密为什么选择seresnextaa201d_32x8d.sw_in12k_ft_in1k_38487.30% top 1准确率的秘密 如果你正在寻找一个在Imadnd-kit元素间距离计算getItemGap函数解析dnd kit元素间距离计算getItemGap函数解析 在现代Web应用中拖拽排序功能已成为提升用户体验的重要交互方式。dnd kit作为轻量级高性能的R前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
