容器未设 height 或 max-height 时滚动条不出现，因高度未约束导致无溢出；祖先 overflow: hidden 会截断子级滚动；::-webkit-scrollbar 需成套声明且仅对直接滚动容器生效；ios/macos 系统策略常覆盖 css 滚动条样式。
容器没设 height 或 max-height
滚动条不出现，最常见原因是容器高度未被约束。浏览器默认让块级元素“由内容撑开”，如果父容器没写 height、max-height 或 flex: 1，它就无限高，内容再长也不会触发溢出逻辑。
典型错误写法：div { overflow-y: auto; } —— 没高度，overflow 就是摆设。
- 必须显式设置有限高度：比如
height: 300px、max-height: 50vh，或在 Flex 布局中用flex: 1让其占满剩余空间 - 百分比高度（如
height: 100%）需确保所有父级都有明确高度，否则链路一断就失效 - 用 Chrome DevTools 的 “Computed” 面板检查目标元素最终生效的
height值，别只看 Styles 标签页
overflow 被父级 hidden 截断
即使子容器写了 overflow-y: auto，只要它的任意一个祖先元素设置了 overflow: hidden（尤其是 html 或 body），滚动行为就会被直接掐断——内容被裁剪，滚动条自然不渲染。
常见误配场景：body { overflow: hidden; } + 内部 .list { height: 400px; overflow-y: auto; } → 外层已锁死，里层再怎么设也白搭。
- 逐级检查祖先元素的
overflow计算值，重点盯html、body、布局容器（如.wrapper） - 避免在根级用
overflow: hidden，除非你真要禁用全局滚动 - 若用 Flex 布局，确认父容器没加
overflow: hidden且子项没被flex-shrink: 0锁死高度
::-webkit-scrollbar 规则链不完整或挂错位置
在 Chrome/Edge 中想自定义滚动条样式，只写 ::-webkit-scrollbar 是不够的。这个伪元素必须成套声明，且只能作用于实际滚动的容器本身，不能写在 html 或 body 上“一劳永逸”。
无效写法示例：.scroll-box::-webkit-scrollbar { width: 6px; } 却漏了 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb → 浏览器直接忽略整条规则。
- 必须三者共存：
::-webkit-scrollbar（设宽高）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块） - 容器自身必须是块级、有明确
overflow-y: auto，且::-webkit-scrollbar的width不能为 0 或过小（建议 ≥ 6px） - 不要写在
* {}或html {}里；它只对直接触发滚动的元素生效，比如.chat-log，不是.chat-wrapper
移动端或 macOS 系统策略覆盖 CSS
iOS Safari 和 macOS 上的 Chrome/Safari 默认启用“自动隐藏滚动条”，且系统设置可强制覆盖所有 CSS。这不是 bug，是平台设计：手势滚动不需要视觉滚动条。
你写的 ::-webkit-scrollbar 在 iOS Safari 中完全无效；Firefox 则压根不认这套，只支持 scrollbar-width 和 scrollbar-color，还要求写在滚动容器上，不能写在通配符里。
- iOS Safari 16.4+ 才开始支持
scrollbar-width，但依然无视::-webkit-scrollbar及其 hover 状态 - macOS 系统偏好设置中若开启「自动隐藏滚动条」，所有 CSS 强制显示滚动条的尝试都会失败
- Android Chrome 支持
::-webkit-scrollbar，但默认禁用 UI，靠 CSS 激活成功率低，不建议强依赖
真正稳定的方案，是放弃“让滚动条一定可见”的执念，转而确保内容可滚、交互可达。视觉提示（比如渐变遮罩、滚动箭头）比强行显示滚动条更可靠，尤其在触屏设备上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
