100vw导致水平溢出是因为它按视口总宽度（含滚动条占位）计算，而windows等系统滚动条宽度不固定，造成“自己撑出滚动条”的循环；应使用document.documentelement.clientwidth动态获取真实可用宽度。
100vw 为什么会导致水平溢出
因为 100vw 是按浏览器视口**总宽度**计算的，包含滚动条占位 —— Windows 默认常驻滚动条约 17px，但这个值不固定：细滚动条、高 DPI 缩放（如 125%）、overflow: overlay 都会让实际差值变化。结果就是：100vw 宽度 + 滚动条自身宽度 > 可视区域宽度，触发水平滚动条，形成“自己撑出滚动条，滚动条又撑宽自己”的循环。
用 document.documentElement.clientWidth 动态获取真实可用宽度
这是目前最可靠的方式，clientWidth 自动扣除当前滚动条宽度，返回的是不含滚动条的视口内容区宽度（单位 px）。
- 必须在布局稳定后读取，比如放在
requestAnimationFrame回调里，否则可能拿到旧值 - 不要用
window.innerWidth做减法：它含滚动条，但差值不稳定；clientWidth直接就是你要的数 - 注意兼容：IE 下
document.documentElement可能为 null，需 fallback 到document.body.clientWidth
示例：
const getAvailableWidth = () => {
const doc = document.documentElement;
return doc.clientWidth || document.body.clientWidth;
};
calc(100vw - Xpx) 不推荐用于滚动条补偿
硬写一个固定像素值（比如 calc(100vw - 17px)）看似简单，但实际会出问题：
- 不同系统/设置下滚动条宽度不同（macOS 默认无常驻滚动条，Edge 可能用 12px）
- 用户缩放页面时，
17px不随缩放比例变化，而vw会变，导致误差放大 - 局部
overflow: scroll容器的滚动条宽度无法通过vw推导，只能用 JS 查offsetWidth - clientWidth
真正需要“减滚动条”的场景（如遮罩层避开右侧滚动条），优先用 width: 100% + 确保父容器无 padding/margin，比硬算 vw 更稳。
什么时候必须用 JS 动态读取滚动条宽度
只有两类情况绕不开 JS：
- 需要精确控制某一个带
overflow的容器内部内容区宽度（比如弹窗内容要刚好填满但不触发二次滚动） - 实现自定义滚动条样式前，得先知道原生滚动条占了多少空间，避免布局抖动
读取方式统一用：ele.offsetWidth - ele.clientWidth，注意该元素必须已渲染且 overflow 生效（不能是 display: none 或未插入 DOM）。
滚动条不是装饰，它是盒模型里一个会动态吃掉 content 区域的“隐形成员”——你没法靠 CSS 声明把它显式减掉，只能靠运行时测量来应对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
