scrollbar-width 在 Chrome 中无效，因其仅为 Firefox 专属属性；Chrome 需用 ::-webkit-scrollbar 系列伪元素实现自定义，且须作用于 overflow: auto/scroll 的可滚动容器。
scrollbar-width 在 Chrome 中根本不起作用
scrollbar-width 是 Firefox 专属的 CSS 属性，Chrome 完全不识别它。你在 Chrome 里写 scrollbar-width: thin 或 scrollbar-width: none，DevTools 会直接标灰、显示“无效属性”，控制台也不会报错——它就静静被忽略。别浪费时间调试这个值在 Chrome 的表现，它本就不该存在。
::-webkit-scrollbar 系列伪元素必须作用于可滚动容器
即使写了完整的 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb，如果目标元素本身没有触发滚动（比如 overflow 不是 auto、scroll 或 overlay），那所有样式都不会渲染出来。
- 确保容器有明确高度或 max-height，且内容溢出
- 设置
overflow-y: auto（或scroll），不能是visible或hidden - 避免父级设置了
overflow: hidden把滚动行为截断 - 注意：Chrome 120+ 开始，
overflow: overlay已被移除，不要用
滑块不显示？先检查 border 和 background 冲突
常见失效场景：写了 ::-webkit-scrollbar-thumb { background-color: #666; border-radius: 6px; }，但滑块还是透明或白色。大概率是之前某处 CSS 给它悄悄加了 border: 1px solid white，而白色边框盖住了背景色。
- 强制重置：
border: none必须显式写上 - 确保
background-color或background有实际颜色值，不是transparent或继承来的currentColor - 如果用了
background-image，记得加上background-color作降级 fallback - DevTools 里选中滑块（Elements → 悬停到滚动条上 → 按 Ctrl/Cmd + Shift + C），看 Computed 标签页里最终生效的
background是什么
自定义滚动条 + scroll-snap-type 在 Chrome 中点击轨道跳顶/跳底
这是 Chrome 特有的交互冲突：当 scroll-snap-type: y mandatory 写在 body 或某个 div 上，同时启用了 ::-webkit-scrollbar，用户点击滚动条轨道时，Chrome 会错误地把滚动定位到文档首尾，而不是按捕捉点步进。
立即学习“前端免费学习笔记（深入）”；
- 唯一稳定解法：把
scroll-snap-type移到html元素上，例如html { scroll-snap-type: y mandatory; } - 不要写成
body { scroll-snap-type: y mandatory; }—— body 不是滚动容器，html 才是 - 确保
html有overflow-y: auto（通常默认就有），否则滚动捕捉不会激活 - 这个坑只在 Chrome 出现，Edge 和 Safari 一般不受影响
::-webkit-scrollbar 都是在和它的私有渲染路径硬碰硬。真正容易被忽略的，是「滚动容器是否真实存在」和「scroll-snap-type 是否挂载在正确节点」这两点——它们不出错，样式才可能被看见。 
