scrollWidth - clientWidth 不等于滚动条宽度，而是内容溢出量；稳定获取滚动条宽度应使用 offsetWidth - clientWidth（配合隐藏滚动容器测量）或 scrollbar-gutter: stable 防布局抖动。
scrollWidth 和 clientWidth 的差值不等于滚动条宽度？
很多人误以为 scrollWidth - clientWidth 就是滚动条宽度，但这是错的——它只在**内容刚好撑满、无内边距、无边框、且 overflow 触发垂直滚动**时偶然成立。实际中，clientWidth 包含内边距但不包含滚动条；scrollWidth 包含内容总宽 + 内边距（不含滚动条），两者相减得到的是“内容溢出量”，不是滚动条本身。
真正能稳定反映滚动条占用空间的，是 offsetWidth - clientWidth（当元素有垂直滚动条时）或 offsetHeight - clientHeight（水平滚动条时），但前提是该元素本身设置了 overflow: scroll 或 auto 且已触发滚动条渲染。
- 如果元素未溢出，
offsetWidth === clientWidth，差值为 0 - 如果元素设置了
box-sizing: border-box，offsetWidth还包含边框，需先减去边框再算 - 移动端 Safari 可能根本不渲染滚动条（仅悬停时浮现），此时差值恒为 0
用临时 DOM 元素测滚动条宽度最可靠
浏览器不提供直接读取系统滚动条宽度的 API，所以主流方案是创建一个强制滚动的隐藏元素，靠 offsetWidth - clientWidth 反推。这个方法兼容所有现代浏览器，且不受当前页面样式干扰。
关键点在于：必须让外层元素出现滚动条，而内层元素填满其内容区——这样内层的 clientWidth 就等于外层内容区宽度，外层的 offsetWidth 则含滚动条，差值即为滚动条宽度。
- 外层
div设置overflow: scroll、固定宽高（如100px）、visibility: hidden - 内层
div设置width: 100%，不设overflow，确保它不产生自己的滚动条 - 插入后立即读取，避免被 CSS 动画或布局抖动干扰
- 返回值应缓存，避免重复计算（滚动条宽度在同一会话中不会变）
示例函数：
function getScrollbarWidth() {
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll';
outer.style.width = '100px';
outer.style.height = '100px';
document.body.appendChild(outer);
<p>const inner = document.createElement('div');
inner.style.width = '100%';
inner.style.height = '100%';
outer.appendChild(inner);</p><p>const width = outer.offsetWidth - inner.offsetWidth;
document.body.removeChild(outer);
return width;
}</p>
scrollbar-gutter: stable 是更现代的解法
如果你的目标不是“知道宽度多少”，而是“不让布局跳动”，那直接用 scrollbar-gutter: stable 更干净。它告诉浏览器：不管滚动条是否显示，都预留空间，避免 html 或容器宽度因滚动条出现而收缩。
注意它只作用于块级容器（如 body、section、div），且需要配合 overflow 才生效。它不改变滚动条本身宽度，也不提供 JS 可读的数值，但它消除了 90% 的抖动场景。
- 对
html元素设置可统一控制整个视口：html { scrollbar-gutter: stable; } - 与
overflow-y: scroll同时用，能强制始终显示滚动条并预留空间 - 支持
env(scrollbar-width)的浏览器（如 Firefox 111+、Chrome 125+）可用该环境变量做响应式适配 - 不兼容旧浏览器时，仍需 fallback 到 JS 测量 +
padding-right补偿
scrollbar-width 属性不能替代测量
scrollbar-width 是 CSS 控制滚动条“最大允许宽度”的声明，不是“当前实际宽度”的读取接口。设成 thin 或 8px 后，浏览器仍可能因系统策略忽略它（比如 macOS Safari 默认隐藏滚动条），JS 也无法通过 getComputedStyle 读到生效后的精确像素值。
它的价值在于设计一致性，而非工程精度：
-
scrollbar-width: thin在 Firefox 中确实会变窄，但在 Chrome 中基本无效 -
scrollbar-width: none隐藏视觉滚动条，但clientWidth仍会被压缩（因为底层空间仍被占用） - 它不解决“元素宽度突然变小导致文字重排”问题，只是让滚动条看起来更细或消失
真正要动态适配布局，还是得靠 scrollbar-gutter 或 JS 测量 —— 前者声明式、轻量；后者命令式、可控。别指望一个 CSS 属性包打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
