fixed侧边栏无法滚动主因是高度未锚定：h-full在脱离文档流后解析为0，需显式设高如h-[calc(100vh-63px)]；祖先transform/filter会裁剪fixed元素；移动端需加touch-action: manipulation并避免body overflow:hidden。
fixed侧边栏高度为0导致无法滚动
最常见的现象是加了 position: fixed 和 top-[63px]，但内容一多就“卡住”，滚不到底——根本不是 overflow 没生效，而是容器压根没高度。因为 h-full 在 fixed 元素里解析为 0（脱离文档流后无父级高度参考），overflow-y-auto 失去作用对象。
实操建议：
- 必须显式设高：用
h-[calc(100vh-63px)]或inset-y-[63px] bottom-0，确保高度可计算 - 避免只写
top: 63px就以为够了；没有bottom或明确高度，浏览器不会推算剩余空间 - 如果侧边栏嵌套在 flex 容器里，确认该容器没加
min-h-screen或h-full——这些在 fixed 上级中会干扰高度继承
祖先元素 transform 导致 fixed 内容被裁剪
侧边栏明明设了 top: 63px、height: calc(100vh - 63px)，滚动时底部突然消失或内容“断层”。大概率是某个父级（比如 layout wrapper）加了 transform: translateZ(0)、will-change: transform 或 filter，强制创建新层叠上下文并剪裁 fixed 子元素。
实操建议：
- 逐级检查所有祖先元素的 computed style，重点看
transform、filter、will-change - 临时删掉这些属性验证是否恢复；若必须保留，改用
position: sticky; top: 63px替代（现代浏览器兼容足够） - 不用
overflow: hidden强行遮盖——它不解决裁剪，只掩盖问题，还会破坏无障碍和横向可访问性
移动端 fixed 侧边栏点击失效或滚动卡顿
iOS Safari 和部分安卓 WebView 下，fixed 侧边栏常出现“点不动”、滑动延迟、滚动卡顿。这不是 CSS 写错了，而是浏览器对 fixed 元素的 repaint 和事件分发机制更保守。
实操建议：
- 给侧边栏根元素加
touch-action: manipulation，明确告诉浏览器这里只处理点击/滑动，跳过默认的延迟判断 - 禁用
body { overflow: hidden }锁屏方式；改用全屏 fixed 遮罩层（inset-0+z-40）配合 JS 控制显示/隐藏 - 侧边栏内部避免大量 DOM 节点或复杂动画；iOS 下 fixed 区域的重绘成本高，卡顿往往来自内部渲染压力，而非定位本身
侧边栏与主内容重叠或底部按钮被挤出
fixed 侧边栏设了 z-index，但主内容区没留白，结果正文从侧边栏底下穿过去；或者展开后底部固定按钮栏（如 position: fixed; bottom: 0）被侧边栏宽度撑出视口外。
实操建议：
-
.sidebar必须带z-index（如z-50），同时主内容区要配ml-[240px]或pl-[240px]（值 ≥ 侧边栏宽度） - 底部按钮栏别用
position: fixed; bottom: 0硬定位；改用position: absolute; bottom: 0，并确保其父容器是position: relative - 避免用
width: 100vw设主内容宽——它无视侧边栏占用；改用calc(100% - 240px)或 Grid 的grid-template-columns: 240px 1fr
真正卡住滚动的，往往不是 overflow 属性漏写了，而是高度没锚定、祖先干扰没排查、或者移动端事件策略没对齐。这几个点漏一个，都可能让侧边栏“看起来正常”，实则滚动失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
