必须同时满足固定尺寸、溢出触发、浏览器分写三条件：容器需显式设置height/max-height，内容真实溢出，且WebKit用::-webkit-scrollbar、Firefox用scrollbar-width/color分别定义，缺一则滚动条不出现或样式失效。
必须同时满足“固定尺寸 + 溢出触发 + 浏览器分写”三个条件，缺一不可；否则滚动条不出现、样式不生效、或只在部分浏览器可见。
容器高度和 overflow 必须显式设置
滚动条不会凭空出现。CSS 的 overflow 属性只有在容器有明确边界且内容真实溢出时才起作用。
-
height或max-height必须写死（如max-height: 300px），min-height不触发溢出判定 - 推荐用
overflow-y: auto而非overflow: scroll：前者只在需要时显示滚动条，后者永远占位，影响布局 - 如果容器是
<table>，直接加overflow无效——必须用<div>包裹，并设display: block - Flex/Grid 容器中子元素可能拉伸父容器高度，导致
max-height失效，需检查align-items和flex-shrink
::-webkit-scrollbar 系列伪元素必须成套定义
Chrome/Edge/Safari（WebKit 内核）下，::-webkit-scrollbar 不是单个样式，而是一组相互依赖的伪元素链。漏掉任意一个，整个自定义就回退到系统默认。
- 必须定义
::-webkit-scrollbar（设width或height，如width: 8px），否则后续规则全失效 -
::-webkit-scrollbar-track建议设background和border-radius，但别加box-shadow（不渲染） -
::-webkit-scrollbar-thumb的background是刚需，不写就是透明——拖不动也看不见 -
border-radius不能超过滑块宽高的一半（例如width: 8px时，border-radius: 5px会错位甚至被裁切） - 悬停效果只能通过
::-webkit-scrollbar-thumb:hover单独写，对父容器加:hover无效
Firefox 兼容只能靠 scrollbar-width 和 scrollbar-color
Firefox 完全忽略所有 ::-webkit- 开头的伪元素，只认两个原生属性，且仅作用于有 overflow 的块级元素（如 .scroll-container），不能写在 html 或 body 上。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-width只接受三个值：auto、thin、none；没有像素级控制，thin在部分版本 Safari 中也不生效 -
scrollbar-color格式严格：scrollbar-color: <thumb> <track>，顺序反了就无效；第二个参数别设transparent，轨道“消失”后滑块仍可拖，但体验极差 - 这两个属性不支持
border-radius、transition、hover，也不响应伪类动画 - 若容器未触发真实滚动（内容没溢出），Firefox 连这两个属性都不会应用
为什么 Safari 上滚动条经常“没反应”
Safari 对 ::-webkit-scrollbar 的支持极不稳定，尤其在 iOS 和旧版 macOS 上。它识别语法，但大量特性被忽略或静默降级。
- iOS Safari 直到 16.4+ 才开始有限支持，macOS Safari 基本不响应
::-webkit-scrollbar-button和::-webkit-scrollbar-corner -
::-webkit-scrollbar-thumb:active在 Safari 中不触发，不要依赖点击反馈 - 不要给
scrollbar-width: thin抱太大期望——多数 Safari 版本直接当auto处理 - 如果设计要求圆角 + 悬停变色 + 全平台稳定显示，
::-webkit-scrollbar就不是可靠方案；得换 JS 库（如simplebar），用绝对定位重绘滚动条
真正容易被忽略的是“真实溢出”的判定逻辑：浏览器不是看你写了多少行 HTML，而是计算渲染后的盒模型尺寸。哪怕代码里写了 max-height: 200px，只要里面一张图没设 max-width: 100%，或者某段文本用了 white-space: nowrap 且超长，整个容器高度就可能被顶开，导致滚动失效——这时候查 CSS 规则不如打开 DevTools 的 Layout 面板看实际尺寸。
