必须同时设置容器尺寸和内容溢出才能触发滚动条；overflow仅在明确宽高且真实溢出时生效，伪元素样式需成套定义并注意浏览器兼容性差异。
给容器设 overflow 并限定尺寸才能触发滚动条
滚动条不会凭空出现，必须满足两个硬性条件：容器有明确的 width 或 height，且内容真实溢出。只写 overflow-y: auto 但没设高度，或子元素用 display: flex 撑不开父容器，滚动条就压根不渲染。
常见错误包括：
- 把
overflow写在html或body上却没配height: 100vh和overflow-y: scroll，导致根滚动条样式不生效 - 用
min-height代替height，内容少时无滚动，样式规则也白写 - 表格直接加
overflow—— 表格是 inline-level 元素，必须套一层<div class="table-wrapper">才能生效
::-webkit-scrollbar 必须成套定义且绑定到具体容器
Chrome/Edge/Safari 只认 ::-webkit-scrollbar 系列伪元素，但它不是“写了就有效”的装饰属性。漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 中任意一个，整套规则大概率被忽略，回退到系统默认样式。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
::-webkit-scrollbar必须先设width（垂直）或height（水平），值建议8px～12px；width: 0可隐藏垂直条 -
::-webkit-scrollbar-thumb的background是刚需，不写就是透明，拖不动也看不见 - 圆角别超限：
border-radius: 4px配width: 8px刚好，若配width: 6px就会被裁剪 - 选择器必须带前缀，比如
.code-block::-webkit-scrollbar，不能只写::-webkit-scrollbar
Firefox 只吃 scrollbar-width + scrollbar-color，且只认 html/body
Firefox 完全无视所有 ::-webkit- 规则，只响应两个声明：scrollbar-width 和 scrollbar-color。而且它们**只对 html 或 body 生效**，写在 .log-panel 这类子容器上毫无作用。
容易踩的坑：
-
scrollbar-color: #6c5ce7 #f0f0f0顺序固定：第一个是滑块色，第二个是轨道色；写反了，颜色就全乱 -
scrollbar-width只接受auto、thin、none—— 写scrollbar-width: 6px直接被忽略 - 轨道色别设
transparent，否则轨道“消失”，只剩滑块悬在空中，用户失去参照 - 这两个属性不支持
:hover、圆角、阴影，别试图用渐变或动画
iOS Safari 基本不支持任何滚动条样式
iOS Safari（包括 iPadOS）从设计上就不支持自定义滚动条样式，无论你写多少 ::-webkit-scrollbar 或 scrollbar-color，它都当没看见。这不是兼容性 bug，而是苹果明确不实现。
实操建议：
- 别用 macOS Safari 测试移动端效果，两者渲染差异极大
- 如果项目强依赖滚动条交互（比如时间轴拖拽），优先保障内容可滚动，而非强求样式统一
- 真要跨平台一致外观，得用 JS 库如
simplebar，但它会替换原生滚动逻辑，可能影响性能和屏幕阅读器体验 - 深色模式切换不能靠
@media (prefers-color-scheme: dark)包裹滚动条规则，得手动为容器加class="dark"并重写整套样式
最常被忽略的一点：滚动条样式不是“写了就能看到”，它依赖真实滚动行为触发渲染。哪怕 CSS 全对，只要容器没真正溢出、或被某些 UI 框架（如 Ant Design）的重置样式设为 display: none，就什么都看不到。动手前先确认控制台里那个容器确实有滚动条——这是所有调试的起点。
