横向滚动主因是body默认margin和html未隐藏溢出，需设html{overflow-x:hidden}、body{margin:0}；用outline快速定位超宽元素；注意transform/fixed元素及vw单位精度问题。
检查 body 和 html 的默认 margin/overflow
很多横向滚动是浏览器默认样式“偷偷”加的。Chrome/Firefox 给 body 默认 margin: 8px，在窄屏或缩放后容易触发溢出；而 html 没设 overflow-x: hidden 时，子元素超宽就会直接撑出滚动条。
- 在 CSS 开头加：
html { overflow-x: hidden; }<br>body { margin: 0; } - 别只依赖
* { box-sizing: border-box; }——它不解决 margin 溢出 - 用 DevTools 的「Layout」面板（Chrome）或「Box Model」（Firefox）直接 hover 查看
body边框外是否有不可见的 margin 或 padding
定位宽度溢出源：用 outline 快速扫描可疑元素
横向滚动往往来自某个没设 max-width 或用了固定 width 的组件，在响应式断点下“顶穿”容器。靠肉眼数嵌套太慢，用 outline 轮廓比 border 更安全（不影响布局）。
- 在控制台执行：
$$('*').forEach(el => el.style.outline = '1px solid red')，再缩放到出问题的尺寸，红色轮廓里哪个“凸出来”就重点查 - 特别注意：
img、table、pre、第三方组件内部的div（比如某些弹窗库自带min-width: 320px） -
outline不触发重排，比临时加border更准
排查 transform 和 position: fixed 的隐性溢出
这两类属性会让元素脱离文档流，但它们的渲染边界仍可能参与视口计算——尤其当 transform 带 scale 或 translateX 超出视口时，浏览器会为“潜在可显示区域”预留空间，导致横向滚动。
- 给疑似元素加
transform: translateZ(0);
强制硬件加速，有时能重置溢出判定逻辑 - 对
position: fixed元素，检查是否设置了left/right同时为非 auto（比如left: 0; right: -20px;），这种写法在某些 Safari 版本下会误算宽度 - 用 DevTools 的「Rendering」面板开启「Paint flashing」，看滚动出现时哪些区域被意外重绘——常指向 transform 动画残留或 fixed 元素重叠
验证媒体查询断点与 vw/vmin 单位的精度偏差
用 @media (max-width: 768px) 切换样式时，实际触发点可能不是整数像素：DPR=2 的设备上，768px 对应物理像素 1536，但浏览器四舍五入或子像素渲染会导致断点“漂移”。更麻烦的是 100vw 在有滚动条时≈视口宽度+滚动条宽度，而 100% 是父容器宽度——两者在窄屏下差 12–17px。
立即学习“前端免费学习笔记（深入）”；
- 把关键断点写成
@media (max-width: 767.98px)，避开四舍五入临界点 - 避免在
width上混用100vw和100%，统一用100%+box-sizing: border-box - 在出问题的尺寸下，用控制台运行
document.documentElement.clientWidth
和window.innerWidth
对比，差值 >1 就说明存在 subpixel 渲染误差
有些 bug 表面是“多了一个滚动条”，实际是三个地方各漏了 0.3px —— 浏览器把它们攒起来，就顶出了那根讨厌的滚动条。
