overflow-x:hidden加在body上无效，是因为它只裁剪直接子元素，而真实溢出源常嵌套多层；须在最靠近溢出源的有明确宽高的父容器上设置，并配合box-sizing、min-width:0及html双重设overflow-x:hidden。
overflow-x-hidden 为什么加了没用
直接给 <body> 加 overflow-x-hidden 失效，是因为它只裁剪自己的子元素，而真正越界的元素往往嵌套在多层容器里（比如 <div class="flex"><div class="w-[800px]">）。浏览器会把溢出“透传”到视口，绕过 <body> 的限制。
常见干扰点：
- 父容器没设明确宽度（如缺
w-full或max-w-full） - 用了
transform或will-change，破坏了块格式化上下文（BFC） - 滚动容器内部有
white-space: nowrap或长单词未断行
移动端表格横向滚动卡顿/失效
Tailwind 默认的 overflow-x-auto 在 iOS Safari 上常卡住或无法滑动，根本原因是滚动容器没真正进入“可滚动状态”——Safari 要求它必须有明确宽高、无 transform 干扰、且滚动上下文未被阻断。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 表格外层容器必须设固定高度（如
h-96）和overflow-y-auto - 避免父级用
transform或will-change（包括translateZ(0)） - 用
touch-pan-y替代overscroll-behavior-y-contain更稳妥（Tailwind v3.4+ 才原生支持后者） - 表格本身加
min-w-max防止列被压缩，再用overflow-x-auto包一层
右侧黑边（黑空区）怎么定位元凶
“黑边”不是背景色问题，而是某个元素实际宽度 > 100vw，触发了隐藏的横向滚动区域。深色背景（如 bg-zinc-900）让这个溢出区显眼。
快速排查方式：
- Chrome DevTools → Rendering → 勾选 “Highlight overflows”
- 控制台执行：
console.log(document.body.scrollWidth, window.innerWidth)，差值 > 1 就确认溢出 - 重点搜这些高危类：
ml-40、mr-32、w-[500px]、flex-shrink-0但没配min-w-0
修复优先级：先删掉所有小屏下生效的 ml-* / mr-*，换成 sm:ml-40 或 max-[639px]:ml-0；图片强制加 max-w-full。
侧边栏或抽屉导致底部滚动条
移动端侧边栏（如 #mobile-menu）如果只是内部 div 设 fixed，外层仍参与文档流，它的 min-h-screen 会撑高 <body>，造成多余垂直滚动条。
关键动作：
- 把
fixed直接加在侧边栏根元素上（如<div id="mobile-menu" class="fixed z-50 inset-0">） - 移除内部冗余的
fixed层，避免嵌套定位干扰 - 内容区加
max-h-[calc(100vh-4rem)] overflow-y-auto，别让它撑高父级 - 主内容区域保持
lg:pl-72不变，因为移动端侧边栏已脱离文档流
最易被忽略的是：overflow 控制必须落在“最靠近溢出源”的容器上，而不是一股脑堆在 <body>。每个滚动区域都得单独配宽高 + overflow + touch 行为，靠一个全局 overflow-x-hidden 基本没用。
