文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本篇文章源于 Modern JavaScript Tutorialjavascript.info仓库中 元素大小与滚动几何属性 章节的滚动条宽度求解题核心目标是给出一个不依赖页面内容、对任意 HTML 文档都成立的滚动条宽度测量方案。读完本文你将掌握offsetWidth与clientWidth这两个几何属性的本质区别理解临时创建一个带滚动条的元素再相减这一经典测量手法并了解滚动条宽度在不同操作系统与浏览器下的真实取值区间Windows 上通常为12px20px也可能为0px。任务背景为什么需要知道滚动条宽度在 2-scrollbar-width/task.md 中任务要求编写一段代码返回标准滚动条的宽度。任务说明给出了关键背景在 Windows 上滚动条宽度通常在12px到20px之间变化如果浏览器不为其预留空间滚动条半透明悬浮在文字之上这种情况也存在宽度可能就是0px代码必须适用于任意 HTML 文档不能依赖页面自身的内容。知道滚动条宽度的实际意义很大当我们用 JavaScript 计算元素可用宽度、实现自定义滚动条、测量布局时滚动条会吃掉一部分内容宽度忽略它会导致布局计算出现偏差。在 article.md 中作者明确提示部分浏览器并非全部会为滚动条预留空间把它从内容区中扣除例如 CSS 宽度为300px、滚动条占16px时实际内容宽度只剩284px。官方解答核心测量代码在 solution.md 中给出的思路非常简洁创建一个带滚动、但没有边框和内边距的元素那么它的外部全宽offsetWidth与内部内容区宽度clientWidth之差就恰好是滚动条宽度。// create a div with the scroll let div document.createElement(div); div.style.overflowY scroll; div.style.width 50px; div.style.height 50px; // must put it in the document, otherwise sizes will be 0 document.body.append(div); let scrollWidth div.offsetWidth - div.clientWidth; div.remove(); alert(scrollWidth);逐行拆解代码要点overflowY scroll强制产生滚动条无论内容是否溢出浏览器都会渲染出垂直滚动条保证offsetWidth与clientWidth存在差值。设置50px × 50px的尺寸让元素足够小、足够普通同时保证差值只由滚动条贡献。关键前提——必须把元素插入文档offsetWidth、clientWidth等几何属性只对已显示的元素有效。元素若未插入文档或其祖先display:none所有几何属性都为0offsetParent则为null见 article.md 中的说明。这正是document.body.append(div)这一步存在的意义。用后即弃测量完成后立刻div.remove()移除临时元素不影响页面布局符合代码应对任意 HTML 文档成立的要求。原理深入offsetWidth 与 clientWidth 到底差在哪要理解这个解法的正确性需要厘清两个几何属性的准确定义见 article.md 的 Geometry 一节offsetWidth/offsetHeight元素的外部宽度/高度即包含边框在内的完整尺寸。图示见 metric-offset-width-height.svg。clientWidth/clientHeight元素边框内部区域的尺寸包含内容与内边距但不包含滚动条。图示见 metric-client-width-height.svg。当元素没有边框、没有内边距时offsetWidth 内容宽度 滚动条宽度若滚动条占位 clientWidth 内容宽度不含滚动条 scrollbarWidth offsetWidth - clientWidthclientWidth的官方定义就是内容加内边距、去掉滚动条因此在无边框无内边距的前提下二者之差被滚动条宽度唯一填充。这也解释了为什么解法特意不设置border和padding——一旦引入它们差值就会被污染无法单独分离出滚动条。一个值得注意的细节RTL 布局同样适用article.md 的clientTop/Left一节提到在从右到左RTL的语言环境如阿拉伯语、希伯来语下滚动条出现在左侧此时clientLeft会额外包含滚动条宽度。但本文的测量方案不依赖clientLeft而是依赖offsetWidth与clientWidth之差无论滚动条在左还是在右clientWidth都始终排除滚动条因此该方案在 RTL 环境下依然成立。真实取值与浏览器差异12px、20px 还是 0px结合 task.md 与 article.md 的说明滚动条宽度存在明显的平台差异场景典型取值Windows 桌面端Firefox / Chrome / Edge12px~20px浏览器会为滚动条预留空间滚动条悬浮透明的浏览器/模式0px不占位article.md 还专门指出一个跨浏览器陷阱getComputedStyle(elem).width读取 CSS 宽度时Chrome 返回减去滚动条后的真实内宽而 Firefox 返回 CSS 原值忽略滚动条因此作者明确建议依赖几何属性而非getComputedStyle。仓库中的可运行示例 cssWidthScroll.view/index.html 正是用来验证这一差异的元素 CSS 宽度为300px在 Windows 桌面端 Firefox 显示300pxChrome/Edge 显示更小的值。结合仓库示例动手验证几何属性仓库中的 metric.view/index.html 提供了一个可交互验证沙箱它渲染一个带25px边框、20px内边距、overflow: auto的示例元素并把clientLeft、clientTop、clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight、offsetParent、offsetLeft、offsetTop、scrollLeft、scrollTop等属性列成可点击列表点击即显示该元素对应属性的实时值。可以借此直观确认示例元素offsetWidth 390CSS 宽300px 左右内边距2 × 20px 左右边框2 × 25px由于垂直滚动条占位clientWidth不是300px 40px 340px而是284px 40px 324px。对照这两个值滚动条在该环境下恰好占390 − 324 66px之外的部分……需要说明的是实际差值取决于具体浏览器与操作系统这正是测量代码必须运行时动态计算而非硬编码的原因。而本文的解法之所以通用是因为它不假设任何具体像素值而是在运行时、在任意文档中现场测量。扩展应用测量之后能做什么掌握滚动条宽度后可以解决一系列布局问题计算可用内容宽度clientWidth本身已排除滚动条可直接用于布局计算判断元素是否完全滚到底部利用scrollTop与scrollHeight − clientHeight的关系仓库同章节 1-get-scroll-height-bottom/task.md 有配套练习实现自定义/统一滚动条样式先用本方案测得原生滚动条宽度再决定是否需要叠加补偿宽度。完整几何属性速查摘自 article.md 的 SummaryoffsetParent—— 最近的定位祖先或td、th、table、bodyoffsetLeft/offsetTop—— 相对offsetParent左上角的坐标offsetWidth/offsetHeight—— 包含边框的外部宽高clientLeft/clientTop—— 从外角到内角内容内边距的距离LTR 下即左/上边框宽RTL 下clientLeft还含滚动条clientWidth/clientHeight—— 内容加内边距、不含滚动条的宽高scrollWidth/scrollHeight—— 同clientWidth/clientHeight但额外包含被滚出隐藏的部分scrollLeft/scrollTop—— 元素被滚出隐藏部分自左上角起的宽高。除scrollLeft/scrollTop外其余几何属性均为只读修改scrollLeft/scrollTop会让浏览器实际滚动元素。小结测量滚动条宽度最可靠的通用做法是临时创建一个overflowY: scroll、无边框无内边距的元素插入文档后计算offsetWidth − clientWidth最后移除该元素。该方案不依赖页面内容、不受 CSSbox-sizing影响、不依赖具体浏览器像素值在 LTR 与 RTL 环境下均适用其结果在 Windows 上通常在12px20px之间在滚动条悬浮不占位的环境下则为0px。完整代码与练习入口见 solution.md 与 task.md。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐30 seconds of code 实战用 JavaScript 精确获取浏览器垂直滚动条宽度30 seconds of code 实战用 JavaScript 精确获取浏览器垂直滚动条宽度 本指南以 30 seconds of code 仓库中的 g教程文档react-use 之 useScrollbarWidth精准测量浏览器滚动条宽度的高阶 Hook 实战指南react use 之 useScrollbarWidth精准测量浏览器滚动条宽度的高阶 Hook 实战指南 导读 useScrollbarWidth 是 r前端现代 JavaScript 教程javascript.info精读JavaScript 语言入门导论现代 JavaScript 教程javascript.info精读JavaScript 语言入门导论 JavaScript 自诞生起就从“让网页动起来的小文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
