横向滚动条的根本原因是浏览器对视口宽度计算偏差，常见于100vw包含滚动条宽度、absolute/fixed元素双向定位、未约束的媒体元素及伪元素撑宽，需逐项排查而非仅用overflow-x:hidden掩盖。
检查 body 和 html 的宽度计算偏差
横向滚动条最常出现在 body 或 html 元素上，但根本原因往往不是“内容太宽”，而是浏览器对视口宽度的计算出错。比如用 100vw 做全屏容器时，它会包含垂直滚动条的宽度（通常 15–17px），导致实际渲染宽度 > 视口，触发水平溢出。
- 避免在根级布局中使用
100vw；改用100%或max-width: 100% - 检查是否在
<style scoped>中写了影响body的样式——它不起作用，必须用全局<style> - 运行控制台命令
document.body.scrollWidth - window.innerWidth，若结果 > 1，说明存在隐性撑宽
定位元素的 right/left 双向约束是隐形杀手
当 position: absolute 或 fixed 元素同时设置了 left 和 right，且其中一个是负值（如 right: -20px），浏览器会反向推算宽度： width = 包含块宽度 − left − right。结果可能远超视口，尤其在 Safari 中更敏感。
- 用 DevTools 的 Elements 面板筛选
[style*="right"]，逐个检查是否与left共存 - 把
right: -Xpx改成transform: translateX(Xpx)——后者不参与盒模型计算 - 若必须用
right，确保其值 ≥ 0，且不与left冲突；优先只设单边 +width
图片、表格、代码块等媒体元素未做响应式约束
一张没设 max-width: 100% 的图片，或一个没加 table-layout: fixed 的表格，很容易在窄屏下撑开父容器。伪元素（如 ::before）生成的不可见内容也可能占空间。
- 全局重置：
img, video, iframe { max-width: 100%; height: auto; } - 表格加
table-layout: fixed; width: 100%，再配合word-break: break-word - 代码块（如
.highlight）设width: 100%; overflow-x: auto - 用
outline: 1px solid red临时高亮所有元素，快速识别视觉外溢
overflow-x: hidden 是临时止血，不是根治方案
直接给 body 加 overflow-x: hidden 能压住滚动条，但掩盖了真实问题：被裁掉的内容仍参与布局计算，JS 获取尺寸、焦点管理、可访问性都会受影响。
立即学习“前端免费学习笔记（深入）”；
- 仅在紧急上线或调试阶段使用，上线前必须回溯定位源元素
- 不要只写
body { overflow-x: hidden }，记得同步处理html，防止父级透传 - 如果用了
overflow-x: hidden后仍有跳动，大概率是垂直滚动条出现/消失导致的宽度变化，需配html { scrollbar-gutter: stable; overflow-y: auto }
真正难的不是加一行 overflow-x: hidden，而是找出那个“看起来没越界却偷偷撑宽”的元素——它可能藏在第三方组件里，可能由 JS 动态注入，也可能只是个没设 box-sizing: border-box 的 padding 容器。
