父元素设 position: absolute 或 fixed 后滚动条消失，是因为其脱离文档流导致父容器高度坍缩为0，浏览器不给高度为0的容器生成滚动条；解决方法是明确滚动主体，如改用 relative 或在子元素上设置可滚动区域。
父元素设了 position: absolute 或 fixed 后滚动条没了
这不是“滚动条消失”，而是父元素彻底退出文档流，不再参与高度计算，导致其父级（比如 body）高度坍缩为 0，自然没有滚动空间。浏览器根本不会给一个高度为 0 的容器生成滚动条。
常见错误现象：
-
.wrapper { position: absolute; top: 0; left: 0; }，但外层body没设height: 100vh或其他约束 - 子元素内容很长，但页面一动不动，
scrollTop始终为 0
解决思路不是“让滚动条回来”，而是明确谁该滚动：
- 若想整个页面滚动：去掉该父元素的
position: absolute/fixed，或改用position: relative - 若必须固定定位：把可滚动区域下移一级，例如用
<main class="scrollable"></main>包住内容，并对其设overflow-y: auto和height: calc(100vh - 60px) - 绝对定位元素本身不负责撑高，它的父容器需用
min-height或伪元素主动占位，不能依赖它“回填”
overflow: hidden 导致滚动条不可见，但内容确实溢出了
overflow: hidden 会直接裁剪内容且禁用滚动条——它本就不提供滚动能力。很多人误以为加了它就能“隐藏多余部分并保留滚动”，其实它和 auto 或 scroll 是互斥行为。
典型误用场景：
- 给
body或html设了overflow: hidden，结果整页锁死无法滚动 - 在 flex 容器里对子项设
overflow: hidden，却期望子项内部能独立滚动（实际需要在子项自身设overflow-y: auto） - 父容器没设高度，只靠
overflow: auto，但子内容又没超出——滚动条当然不出现
关键判断点：
-
overflow是否作用在真正需要滚动的容器上？不是“看起来该滚”的地方，而是“内容实际超出其边界”的那个元素 - 该容器是否具备明确的高度约束？
height、max-height、flex: 1等都可触发，纯min-height不够 - 避免在
body上设overflow: hidden，除非你真要禁用全局滚动；临时调试可用overflow: visible快速验证
用了 position: sticky，滚动时元素“不见了”
sticky 元素消失，90% 是因为它的父容器没形成滚动上下文，或者被 overflow: hidden / clip 直接封死了触发条件。它不会自己创造滚动，只响应已有滚动。
检查清单：
- 父容器是否设置了
overflow-y: auto或scroll？仅overflow: hidden会让 sticky 完全失效 - 父容器是否有明确高度？
height: 100%在无继承高度的链路上等于 0，得用vh、flex或max-height -
top值是否合理？top: 999px在多数屏幕下永远达不到，元素就一直以relative渲染，随后被后续内容推走 - 父容器是否是
body？某些 Safari 版本对body上的 sticky 支持不稳定，建议包一层div并设overflow-y: auto
移动端尤其注意：position: sticky 在 iOS Safari 中可能因父容器 transform 或 will-change 被降级，可临时换用 position: -webkit-sticky 或改用 JS 模拟。
滚动条时隐时现，或双滚动条并存
本质是滚动上下文嵌套失控：外层容器设了 overflow: auto，内层又有一个可滚动区域，浏览器不知道该由谁响应滚轮事件，结果要么抢事件、要么互相遮挡。
最稳妥做法是“单层滚动”：
- 只在主内容区启用滚动（如
.main），其他区域用overflow: visible或hidden明确关闭 - 避免在
body和某个div上同时设overflow-y: auto - 自定义滚动条时，
::-webkit-scrollbar必须配齐::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，否则某些状态（如 hover）下滚动条会闪退 - Firefox 需单独加
scrollbar-width: none或auto，不能只靠 WebKit 规则
容易被忽略的一点：Windows 下，body { overflow-y: auto } 可能导致默认滚动条始终显示（哪怕内容不够长），而 Mac 不会。如果追求跨平台一致，优先控制具体容器，而非 body。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
