尧图网页设计 
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读在 DOM 布局与滚动交互开发中scrollTop只能告诉我们元素顶部滚出了多少却无法直接回答「元素底部还有多少内容未显示」。本篇文章基于现代 JavaScript 教程Modern JavaScript Tutorialen.javascript.info中 「元素的尺寸与滚动」一章 的配套习题task.md 与 solution.md深入讲解scrollBottom scrollHeight - scrollTop - clientHeight这一核心公式的原理、边界条件与实战应用。读完本文你将掌握任意元素底部剩余滚动量的计算、底部到达检测、滚动条宽度测量以及几何属性族offset/client/scroll的完整语义。一、问题定义什么是「从底部滚出的距离」习题原文给出了明确的问题背景elem.scrollTop属性表示从顶部滚出去的部分的大小。那么如何获取底部滚动的大小我们称之为scrollBottom并提出了两个必须满足的边界要求P.S.请检查你的代码如果没有滚动或者元素已经完全滚动到底部那么它应该返回0。也就是说scrollBottom度量的是当前视口底部之外、尚未显示出来的内容高度。当内容没有溢出时它自然是0当用户滚动到底部时底部已经没有未显示内容它同样应该是0。从仓库的章节结构看该习题位于 2-ui/1-document/09-size-and-scroll/ 目录下importance 为 5最高优先级属于本章最重要的核心考点之一与 「滚动条宽度」习题、「CSS width 与 clientWidth 的差异」习题 共同构成对滚动几何体系的完整检验。二、标准答案一行公式官方解答 给出了适用于任意elem的通用代码let scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight;答案原文用一句简洁的话总结了公式含义换句话说(完整高度) 减去 (顶部已滚出的部分) 减去 (可见部分) —— 恰好就是底部滚出的部分。三、公式的几何拆解要真正理解并记住这个公式需要把三个几何属性分别还原为可视化的物理量属性含义以垂直滚动为例来源依据elem.scrollHeight内容的完整内部高度包含滚出隐藏的部分article.md 的 scrollWidth/Height 小节elem.scrollTop从顶部滚出去的隐藏部分高度即「往上滚了多少」article.md 的 scrollLeft/scrollTop 小节elem.clientHeight边框内侧可见区域的尺寸含 padding、不含滚动条article.md 的 clientWidth/Height 小节下图完整展示了这三个量在带有垂直滚动条的块上的关系用数学语言表达元素的纵向空间被划分为三段scrollHeight scrollTop顶部已滚出 clientHeight当前可见 scrollBottom底部未显示因此scrollBottom scrollHeight - scrollTop - clientHeight这也是整章「几何属性」体系metric-all.svg 总览图在实践中最典型的应用之一通过三个只读属性的一次减法即可得到浏览器未直接暴露的派生量。四、边界条件验证为什么两种情况下都返回 0习题的 P.S. 要求代码在两种极端场景下必须返回0我们逐一代入验证场景 1元素没有滚动内容不溢出此时内容完整可见因此scrollHeight clientHeight内容完整填充可见区域 scrollTop 0没有任何部分滚出 scrollBottom clientHeight - 0 - clientHeight 0 ✅场景 2元素已经完全滚动到底部完全滚到底部时scrollTop达到其最大值。根据滚动机制scrollTop的最大值恰好是scrollTop_max scrollHeight - clientHeight代入公式scrollBottom scrollHeight - (scrollHeight - clientHeight) - clientHeight 0 ✅这个验证同时揭示了一个有用的推论scrollHeight - clientHeight就是scrollTop的合法取值上界即「可滚动总量」。这在实现「滚动到底」功能时非常实用// 将元素滚动到底部 elem.scrollTop elem.scrollHeight - elem.clientHeight;五、完整几何属性族速览公式背后的知识地图scrollBottom公式虽然只有一行但它的三个操作数都属于本章系统讲解的 DOM 几何属性族。理解整个属性族有助于在任何布局场景下正确使用该公式属性语义是否可写offsetParent用于渲染定位的最近祖先定位元素、td/th/table或body只读offsetLeft/offsetTop相对offsetParent左上角的坐标只读offsetWidth/offsetHeight包含边框的「外部」尺寸只读clientLeft/clientTop从外角到内角content padding的距离即边框宽RTL 时clientLeft含滚动条只读clientWidth/clientHeight边框内侧区域尺寸含 padding、不含滚动条只读scrollWidth/scrollHeight内容完整尺寸含滚出的隐藏部分只读scrollLeft/scrollTop从左上角起滚出部分的宽/高可写写入后浏览器会实际滚动元素完整的示意图见本章的 metric-all.svg。需要特别强调两条本章反复出现的实践准则不要用getComputedStyle(elem).width代替几何属性。CSS 的width受box-sizing影响、可能返回auto字符串且不同浏览器对滚动条占位的处理不一致如 Chrome 返回减去滚动条的真实宽度Firefox 返回纯 CSS 宽度。而clientWidth/clientHeight始终一致地减去滚动条占位。详见 6-width-vs-clientwidth 习题解答。隐藏元素或其祖先display:none、未插入文档的所有几何属性都为 0此时scrollBottom也会错误地算出 0。因此该公式只对已渲染到页面中的元素有效。六、实战延伸把公式封装为可复用的工具结合上面的边界验证我们可以把标准答案封装为一个健壮的工具函数并加上防御性保护/** * 返回元素从底部滚出的距离像素。 * - 无滚动或已滚动到底部时返回 0 * - 对未渲染元素返回 0 */ function getScrollBottom(elem) { if (!elem.offsetWidth !elem.offsetHeight) return 0; // 隐藏/未渲染 return Math.max(0, elem.scrollHeight - elem.scrollTop - elem.clientHeight); }配套的常用场景——检测是否滚动到底部常用于无限加载触发function isScrolledToBottom(elem) { return elem.scrollHeight - elem.scrollTop - elem.clientHeight 0; }一个值得注意的工程细节scrollTop在不同浏览器中可能存在亚像素值或取整差异详见 scrollLeft/scrollTop 小节 中「可被修改」的说明因此实战代码中通常用Math.max(0, ...)或 0的判断做兜底避免浮点误差导致「永远差 1px」的假阴性。七、实战延伸滚动条宽度与可见区域的关系scrollBottom公式中clientHeight之所以「不含滚动条」是因为浏览器会从内容区中为滚动条预留空间Windows 下的多数浏览器均如此。如果需要精确测量滚动条宽度本章配套的 「滚动条宽度」习题解答 给出了标准做法创建一个无边框、无 padding 但强制出现垂直滚动条的 div其offsetWidth - clientWidth即为滚动条宽度// 创建一个带滚动条的 div let div document.createElement(div); div.style.overflowY scroll; div.style.width 50px; div.style.height 50px; // 必须放入文档否则尺寸为 0 document.body.append(div); let scrollWidth div.offsetWidth - div.clientWidth; div.remove(); alert(scrollWidth); // Windows 下通常 12px ~ 20px可能为 0这个技巧与本篇主题的关联在于它证明了client*族属性总是「扣除滚动条」的真实可见区域而这正是scrollBottom公式中clientHeight项的设计依据。八、动手验证在演示沙盒中运行公式本章目录下提供了可运行的演示页面 metric.view/index.html。页面中内置了一个带300px宽度、200px高度、25px边框、20pxpadding 与overflow: auto的#example示例元素并通过点击事件动态展示clientWidth/clientHeight/scrollWidth/scrollHeight/scrollTop等属性的实时取值。你可以按以下步骤亲自验证scrollBottom公式打开metric.view/index.html或 沙盒入口滚动#example元素在控制台执行const elem document.getElementById(example); const scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight; console.log(scrollBottom);分别在「未滚动」「滚动到中间」「滚动到底部」三种状态下对比输出未滚动时为 0滚动过程中大于 0完全到底部时恢复为 0——与习题 P.S. 的要求完全一致。小结scrollBottom问题的标准答案只有一行但其背后是 DOM 几何属性族的完整知识公式scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight三段式理解完整高度 顶部已滚出 当前可见 底部未显示边界保证无滚动与完全滚到底时均自然返回0工程化封装时注意隐藏元素返回 0、scrollTop亚像素取整以及用scrollHeight - clientHeight作为scrollTop上界实现「滚到底」配套能力结合offsetWidth - clientWidth可测滚动条宽度结合 几何属性章节 可完整掌握 offset/client/scroll 三族属性。这一公式是滚动监听、无限加载、阅读进度指示、自定义滚动条等前端功能的通用基础值得在真实项目中反复使用并熟练掌握。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐从入门到精通DeepFace距离计算完全指南从入门到精通DeepFace距离计算完全指南 DeepFace是一个轻量级的Python人脸识别和面部属性分析库支持年龄、性别、情感和种族识别等功能。本文将人工智能计算机视觉深度学习dnd-kit元素间距离计算getItemGap函数解析dnd kit元素间距离计算getItemGap函数解析 在现代Web应用中拖拽排序功能已成为提升用户体验的重要交互方式。dnd kit作为轻量级高性能的R前端UI组件Modern JavaScript 教程实战巧用 Date 自动校正一行代码获取任意月份最后一天Modern JavaScript 教程实战巧用 Date 自动校正一行代码获取任意月份最后一天 在 JavaScript 中判断某个月有多少天看似简单文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Modern JavaScript 教程实战：如何用一行代码计算元素「从底部滚出的距离」scrollBottom
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读在 DOM 布局与滚动交互开发中scrollTop只能告诉我们元素顶部滚出了多少却无法直接回答「元素底部还有多少内容未显示」。本篇文章基于现代 JavaScript 教程Modern JavaScript Tutorialen.javascript.info中 「元素的尺寸与滚动」一章 的配套习题task.md 与 solution.md深入讲解scrollBottom scrollHeight - scrollTop - clientHeight这一核心公式的原理、边界条件与实战应用。读完本文你将掌握任意元素底部剩余滚动量的计算、底部到达检测、滚动条宽度测量以及几何属性族offset/client/scroll的完整语义。一、问题定义什么是「从底部滚出的距离」习题原文给出了明确的问题背景elem.scrollTop属性表示从顶部滚出去的部分的大小。那么如何获取底部滚动的大小我们称之为scrollBottom并提出了两个必须满足的边界要求P.S.请检查你的代码如果没有滚动或者元素已经完全滚动到底部那么它应该返回0。也就是说scrollBottom度量的是当前视口底部之外、尚未显示出来的内容高度。当内容没有溢出时它自然是0当用户滚动到底部时底部已经没有未显示内容它同样应该是0。从仓库的章节结构看该习题位于 2-ui/1-document/09-size-and-scroll/ 目录下importance 为 5最高优先级属于本章最重要的核心考点之一与 「滚动条宽度」习题、「CSS width 与 clientWidth 的差异」习题 共同构成对滚动几何体系的完整检验。二、标准答案一行公式官方解答 给出了适用于任意elem的通用代码let scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight;答案原文用一句简洁的话总结了公式含义换句话说(完整高度) 减去 (顶部已滚出的部分) 减去 (可见部分) —— 恰好就是底部滚出的部分。三、公式的几何拆解要真正理解并记住这个公式需要把三个几何属性分别还原为可视化的物理量属性含义以垂直滚动为例来源依据elem.scrollHeight内容的完整内部高度包含滚出隐藏的部分article.md 的 scrollWidth/Height 小节elem.scrollTop从顶部滚出去的隐藏部分高度即「往上滚了多少」article.md 的 scrollLeft/scrollTop 小节elem.clientHeight边框内侧可见区域的尺寸含 padding、不含滚动条article.md 的 clientWidth/Height 小节下图完整展示了这三个量在带有垂直滚动条的块上的关系用数学语言表达元素的纵向空间被划分为三段scrollHeight scrollTop顶部已滚出 clientHeight当前可见 scrollBottom底部未显示因此scrollBottom scrollHeight - scrollTop - clientHeight这也是整章「几何属性」体系metric-all.svg 总览图在实践中最典型的应用之一通过三个只读属性的一次减法即可得到浏览器未直接暴露的派生量。四、边界条件验证为什么两种情况下都返回 0习题的 P.S. 要求代码在两种极端场景下必须返回0我们逐一代入验证场景 1元素没有滚动内容不溢出此时内容完整可见因此scrollHeight clientHeight内容完整填充可见区域 scrollTop 0没有任何部分滚出 scrollBottom clientHeight - 0 - clientHeight 0 ✅场景 2元素已经完全滚动到底部完全滚到底部时scrollTop达到其最大值。根据滚动机制scrollTop的最大值恰好是scrollTop_max scrollHeight - clientHeight代入公式scrollBottom scrollHeight - (scrollHeight - clientHeight) - clientHeight 0 ✅这个验证同时揭示了一个有用的推论scrollHeight - clientHeight就是scrollTop的合法取值上界即「可滚动总量」。这在实现「滚动到底」功能时非常实用// 将元素滚动到底部 elem.scrollTop elem.scrollHeight - elem.clientHeight;五、完整几何属性族速览公式背后的知识地图scrollBottom公式虽然只有一行但它的三个操作数都属于本章系统讲解的 DOM 几何属性族。理解整个属性族有助于在任何布局场景下正确使用该公式属性语义是否可写offsetParent用于渲染定位的最近祖先定位元素、td/th/table或body只读offsetLeft/offsetTop相对offsetParent左上角的坐标只读offsetWidth/offsetHeight包含边框的「外部」尺寸只读clientLeft/clientTop从外角到内角content padding的距离即边框宽RTL 时clientLeft含滚动条只读clientWidth/clientHeight边框内侧区域尺寸含 padding、不含滚动条只读scrollWidth/scrollHeight内容完整尺寸含滚出的隐藏部分只读scrollLeft/scrollTop从左上角起滚出部分的宽/高可写写入后浏览器会实际滚动元素完整的示意图见本章的 metric-all.svg。需要特别强调两条本章反复出现的实践准则不要用getComputedStyle(elem).width代替几何属性。CSS 的width受box-sizing影响、可能返回auto字符串且不同浏览器对滚动条占位的处理不一致如 Chrome 返回减去滚动条的真实宽度Firefox 返回纯 CSS 宽度。而clientWidth/clientHeight始终一致地减去滚动条占位。详见 6-width-vs-clientwidth 习题解答。隐藏元素或其祖先display:none、未插入文档的所有几何属性都为 0此时scrollBottom也会错误地算出 0。因此该公式只对已渲染到页面中的元素有效。六、实战延伸把公式封装为可复用的工具结合上面的边界验证我们可以把标准答案封装为一个健壮的工具函数并加上防御性保护/** * 返回元素从底部滚出的距离像素。 * - 无滚动或已滚动到底部时返回 0 * - 对未渲染元素返回 0 */ function getScrollBottom(elem) { if (!elem.offsetWidth !elem.offsetHeight) return 0; // 隐藏/未渲染 return Math.max(0, elem.scrollHeight - elem.scrollTop - elem.clientHeight); }配套的常用场景——检测是否滚动到底部常用于无限加载触发function isScrolledToBottom(elem) { return elem.scrollHeight - elem.scrollTop - elem.clientHeight 0; }一个值得注意的工程细节scrollTop在不同浏览器中可能存在亚像素值或取整差异详见 scrollLeft/scrollTop 小节 中「可被修改」的说明因此实战代码中通常用Math.max(0, ...)或 0的判断做兜底避免浮点误差导致「永远差 1px」的假阴性。七、实战延伸滚动条宽度与可见区域的关系scrollBottom公式中clientHeight之所以「不含滚动条」是因为浏览器会从内容区中为滚动条预留空间Windows 下的多数浏览器均如此。如果需要精确测量滚动条宽度本章配套的 「滚动条宽度」习题解答 给出了标准做法创建一个无边框、无 padding 但强制出现垂直滚动条的 div其offsetWidth - clientWidth即为滚动条宽度// 创建一个带滚动条的 div let div document.createElement(div); div.style.overflowY scroll; div.style.width 50px; div.style.height 50px; // 必须放入文档否则尺寸为 0 document.body.append(div); let scrollWidth div.offsetWidth - div.clientWidth; div.remove(); alert(scrollWidth); // Windows 下通常 12px ~ 20px可能为 0这个技巧与本篇主题的关联在于它证明了client*族属性总是「扣除滚动条」的真实可见区域而这正是scrollBottom公式中clientHeight项的设计依据。八、动手验证在演示沙盒中运行公式本章目录下提供了可运行的演示页面 metric.view/index.html。页面中内置了一个带300px宽度、200px高度、25px边框、20pxpadding 与overflow: auto的#example示例元素并通过点击事件动态展示clientWidth/clientHeight/scrollWidth/scrollHeight/scrollTop等属性的实时取值。你可以按以下步骤亲自验证scrollBottom公式打开metric.view/index.html或 沙盒入口滚动#example元素在控制台执行const elem document.getElementById(example); const scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight; console.log(scrollBottom);分别在「未滚动」「滚动到中间」「滚动到底部」三种状态下对比输出未滚动时为 0滚动过程中大于 0完全到底部时恢复为 0——与习题 P.S. 的要求完全一致。小结scrollBottom问题的标准答案只有一行但其背后是 DOM 几何属性族的完整知识公式scrollBottom elem.scrollHeight - elem.scrollTop - elem.clientHeight三段式理解完整高度 顶部已滚出 当前可见 底部未显示边界保证无滚动与完全滚到底时均自然返回0工程化封装时注意隐藏元素返回 0、scrollTop亚像素取整以及用scrollHeight - clientHeight作为scrollTop上界实现「滚到底」配套能力结合offsetWidth - clientWidth可测滚动条宽度结合 几何属性章节 可完整掌握 offset/client/scroll 三族属性。这一公式是滚动监听、无限加载、阅读进度指示、自定义滚动条等前端功能的通用基础值得在真实项目中反复使用并熟练掌握。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐从入门到精通DeepFace距离计算完全指南从入门到精通DeepFace距离计算完全指南 DeepFace是一个轻量级的Python人脸识别和面部属性分析库支持年龄、性别、情感和种族识别等功能。本文将人工智能计算机视觉深度学习dnd-kit元素间距离计算getItemGap函数解析dnd kit元素间距离计算getItemGap函数解析 在现代Web应用中拖拽排序功能已成为提升用户体验的重要交互方式。dnd kit作为轻量级高性能的R前端UI组件Modern JavaScript 教程实战巧用 Date 自动校正一行代码获取任意月份最后一天Modern JavaScript 教程实战巧用 Date 自动校正一行代码获取任意月份最后一天 在 JavaScript 中判断某个月有多少天看似简单文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考