能实现，但必须满足两个前提：容器得有明确滚动上下文，且自定义样式只在 webkit 内核中可靠生效。grid 容器需显式设置 height 或 max-height 并将 overflow-y: auto 写在容器上，::-webkit-scrollbar 样式需完整定义 width/height 和 background-color，firefox 和移动端基本不支持进阶定制，实际应优先保障滚动手感与可访问性。
能实现，但必须满足两个前提：容器得有明确滚动上下文，且自定义样式只在 WebKit 内核中可靠生效。
为什么 Grid 容器加了 overflow-y: auto 还没滚动条？
根本不是 Grid 本身的问题，而是滚动上下文没真正建立起来。
-
height或max-height必须显式设置，仅靠min-height或 flex 布局撑高无效 -
overflow-y: auto或scroll要写在 Grid 容器上，不能只靠子项溢出自动触发 - 如果用了
display: grid但没设列/行轨道（如grid-template-columns），内容可能仍按块流渲染，导致高度计算异常 - 某些场景下（比如嵌套 Grid），父容器的
overflow会被子项的overflow: hidden截断，需检查 computed overflow 层级
::-webkit-scrollbar 样式不生效的常见硬伤
不是选择器写错了，是伪元素链被浏览器直接忽略。
-
::-webkit-scrollbar必须配width（垂直）或height（水平），缺一个值整个链就失效 -
::-webkit-scrollbar-thumb至少要设background-color，透明或未设背景 = 滑块不可见 - 别给
::-webkit-scrollbar-track加border或padding，容易错位、遮挡滑块甚至导致滑块消失 - 选择器必须精确匹配可滚动容器，例如写
.grid-container::-webkit-scrollbar，但实际滚动的是内部某个子元素，那样式就挂了
Firefox 和移动端要不要适配？
现实点说，不用白费劲。
- Firefox 97+ 支持
::-moz-scrollbar，但 API 不稳定、文档稀少、社区基本没人用，项目里几乎等于不存在 - iOS Safari 完全禁用
::-webkit-scrollbar；Android Chrome 自 80+ 版本起逐步移除支持，真机上一律退回系统默认样式 - 新标准
scrollbar-width和scrollbar-color只能设颜色，不支持圆角、阴影、渐变等任何进阶样式，且 Firefox 外基本不认 - 所谓“兼容写法”只是让不同内核下至少显示原生滚动条，而不是统一外观——这点必须提前和设计/产品对齐
真正关键的不是怎么写样式，而是判断这个需求是否值得投入：如果滚动区域是侧边导航、数据表格这类高频交互区，建议优先保障滚动手感与可访问性；若只是装饰性区域，那 WebKit 下能看就行，别为不可控的平台做过度设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
