滚动条美化需先确保容器有明确宽高且内容真实溢出，再对触发滚动的块级元素整套定义::-webkit-scrollbar系列伪元素；Firefox/Safari需用scrollbar-width和scrollbar-color兜底。
页面排版中，滚动条美化不是“加个样式就完事”，而是要先让内容真正溢出、再精准绑定样式到触发滚动的容器上。直接写 ::-webkit-scrollbar 在 html 或 body 上通常无效——浏览器只认「实际在滚动」的块级元素。
确保内容真实溢出，滚动条才能出现
滚动条样式定制的前提是：容器必须满足两个条件——有明确宽高（或视口约束），且内容确实超出可视区域。
- 给容器设固定尺寸，比如
width: 320px; height: 200px;，再加overflow-y: auto;或overflow-x: auto; - 横向滚动常见于长文本、时间轴、卡片流等场景，可用
white-space: nowrap;或display: flex; flex-wrap: nowrap;配合超宽子元素触发 - 避免用
overflow: scroll;强制显示滚动条——它会始终占位，影响排版；auto更自然，只在需要时出现
垂直滚动条定制：成套写，缺一不可
WebKit 浏览器（Chrome/Edge/Safari）靠伪元素控制，但必须整套定义，漏掉任一部件就会回退默认样式。
-
.scroll-box::-webkit-scrollbar { width: 8px; }—— 控制垂直滚动条宽度（height是给水平条用的） -
.scroll-box::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 4px; }—— 轨道必须设background，否则透明难识别 -
.scroll-box::-webkit-scrollbar-thumb { background: #999; border-radius: 4px; }—— 滑块也要设背景，不然看不见 - 交互增强：
.scroll-box::-webkit-scrollbar-thumb:hover { background: #666; }单独写，不能合并进基础规则
水平滚动条单独定制：改 height，隐藏垂直条
当页面或容器只希望呈现水平滚动（如宽表格、横向时间轴），需主动抑制垂直方向干扰。
- 对触发水平滚动的容器设
overflow-x: auto; overflow-y: hidden; - 用
::-webkit-scrollbar { height: 8px; width: 0; }——height控制水平条“厚度”，width: 0隐藏垂直条（注意不是display: none） - 轨道和滑块规则同理，但视觉上它们是横着的，圆角值别超过
height的一半，否则变形 - 若想鼠标悬停才显示水平滚动条，可结合
:hover动态切换：.box:hover::-webkit-scrollbar { height: 8px; }
Firefox 和 Safari 兼容：用标准属性兜底
Firefox 完全不支持 ::-webkit-scrollbar，必须用原生 CSS 属性；Safari 对部分 WebKit 扩展支持不稳定，需验证。
- 对根滚动容器（如
body或自定义包裹层）加：scrollbar-width: thin;+scrollbar-color: #999 #f5f5f5; - 顺序不能错：
thumb-color在前，track-color在后；track-color设transparent会导致轨道消失，不建议 - Safari 17+ 支持
scrollbar-width，但 macOS 上若启用了overscroll-behavior: contain，可能干扰手势回弹，上线前务必实机测试 - 不推荐为兼容旧浏览器引入 JS 库（如 OverlayScrollbars）——增加体积、影响首屏、干扰无障碍，纯 CSS 方案已覆盖主流场景
