横向滚动条主因是视口被意外撑宽或截断，需先堵溢出源头：重置html{overflow-x:hidden}、body{margin:0;padding:0}；用outline扫描超宽元素；排查transform/fixed隐性溢出；慎用100vw，优先100%。
页面左右出现滚动条，基本不是“内容太多”，而是视口被意外撑宽或截断。核心思路是：先堵住溢出源头，再逐层定位超宽元素。
检查 html 和 body 的默认样式
浏览器会给 body 默认加 margin: 8px，在窄屏、缩放或 DPR 较高时极易触发横向滚动。同时，html 若没限制水平溢出，子元素一超宽就直接拉出滚动条。
- 在 CSS 开头统一重置：
html { overflow-x: hidden; }<br>body { margin: 0; padding: 0; } - 别只依赖
* { box-sizing: border-box; }—— 它不解决 margin 溢出 - 用 DevTools 的「Box Model」面板 hover 查看 body，确认外边距是否为 0
用 outline 快速扫描超宽元素
横向滚动往往来自某个没设 max-width、用了固定 width 或 vw 的组件，在响应式断点下“顶穿”容器。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在控制台执行：
$$('*').forEach(el => el.style.outline = '1px solid red') - 缩放到出问题的尺寸，观察哪个红色轮廓“凸出”视口边界
- 重点关注：
img（未设max-width: 100%）、table、pre、第三方弹窗/编辑器内部的div（如带min-width: 320px）
排查 transform 和 fixed 元素的隐性溢出
transform（尤其是 scale 或大数值 translateX）和 position: fixed 元素虽脱离文档流，但渲染边界仍可能参与视口宽度计算，导致浏览器预留额外空间。
立即学习“前端免费学习笔记（深入）”；
- 给疑似元素临时加
transform: translateZ(0)，测试是否缓解 - 检查
fixed元素是否写了left: 0; right: -10px;这类组合——某些 Safari 版本会误算宽度 - 开启 Chrome 「Rendering」→「Paint flashing」，滚动时看哪些区域异常重绘，常指向问题元素
验证 vw 单位与媒体查询的精度偏差
100vw 在有垂直滚动条时 ≈ 视口宽度 + 滚动条宽度（通常多出 12–17px），而 100% 是父容器宽度，两者在窄屏下不等价；媒体查询断点也可能因 DPR 或子像素渲染“漂移”。
- 关键断点建议写成
@media (max-width: 767.98px)，避开整数四舍五入陷阱 - 避免对根容器用
width: 100vw，优先用width: 100%或fit-content - 若必须用
vw，搭配max-width: 100%双保险
