overflow-y: auto 本身不触发滚动条美化，因美化需配合 scrollbar-color/scrollbar-width（firefox/safari/chrome 121+）或 ::-webkit-scrollbar（chrome/edge/旧safari），且必须作用于可滚动容器，避免父级 overflow: hidden 裁剪。
overflow-y: auto 为什么滚动条轨道不显示美化效果
不是 CSS 没生效，是浏览器默认只渲染原生滚动条——scrollbar-width 和 ::-webkit-scrollbar 这类样式只在特定引擎下起作用，且 Bootstrap 完全不干预滚动条 UI。直接加 overflow-y: auto 后发现轨道还是灰扑扑的，大概率是因为没写对目标选择器，或被父容器 overflow: hidden 截断了渲染层。
怎么用 CSS 美化滚动条轨道（Chrome / Edge / Safari 新版）
现代 Chromium 和 Safari 16.4+ 支持 scrollbar-width 和 scrollbar-color，但仅限于轨道和滑块颜色，不能改宽高或圆角。这是最轻量、兼容性最好的方案：
-
scrollbar-color: #6c757d #f8f9fa;—— 前者是滑块色，后者是轨道背景色 -
scrollbar-width: thin;或auto（thin在 Safari 中需配合-webkit-appearance: none才稳定） - 必须加在滚动容器本身上，比如
.scrollable { scrollbar-color: ...; }，不能加在外层阴影容器上 - 别在
@media里重复声明——这些属性本身响应式，无需断点重写
如何深度定制滚动条（仅 Chromium / Edge，不支持 Safari）
想改宽度、圆角、hover 效果？只能靠 WebKit 伪元素，但注意：它只在 Chrome、Edge、旧版 Safari 生效，新版 Safari 已弃用 ::-webkit-scrollbar-track 的部分行为。
- 滚动容器必须设
overflow-y: auto且有明确max-height，否则伪元素无渲染上下文 - 轨道样式写法：
.scrollable::-webkit-scrollbar-track { background: #f1f3f5; border-radius: 8px; } - 滑块样式：
.scrollable::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 8px; } - hover 状态必须单独写：
.scrollable:hover::-webkit-scrollbar-thumb { background: #6c757d; } - 移动端 Safari 不支持 hover，所以这个交互在 iOS 上无效；Android Chrome 可用，但需测试 WebView 版本
为什么美化后滚动条突然消失或错位
常见原因不是代码写错，而是布局干扰导致伪元素定位失效或裁剪边界变化：
- 父容器设了
overflow: hidden—— 这会把整个滚动条（包括轨道）裁掉，尤其当外层加了shadow-sm又没配position: relative时极易发生 - 滚动区用了
transform（比如rotate(-90deg)做竖排文字）—— WebKit 伪元素不随 transform 重绘，轨道会偏移甚至不可见 - 内容含
table或未设min-width: 0的 flex 子项 —— 横向撑宽后，垂直滚动条被挤到视口外，轨道“还在”，但你看不见 - 在
.modal-body里加美化滚动条？得确认它没被.modal-content的overflow: hidden覆盖——Bootstrap 5.3 默认加了这个，必须手动覆盖
真正稳的做法：先确保滚动能触发（scrollHeight > clientHeight），再加美化；移动端优先用 scrollbar-width: thin + scrollbar-color，放弃 WebKit 深度定制——毕竟 iOS 用户占大头，而它的滚动体验已足够顺滑。
