::-webkit-scrollbar仅在chromium系浏览器和safari中生效，firefox需用scrollbar-width和scrollbar-color，且仅支持html/body；定制div滚动条时webkit可用但firefox不支持，移动端兼容性差，还需兼顾可访问性与性能。
Chrome/Firefox 中 ::-webkit-scrollbar 不生效的常见原因
直接套用网上搜到的自定义滚动条 CSS 却没反应？大概率是漏了关键前提：::-webkit-scrollbar 仅在基于 Chromium 的浏览器（Chrome、Edge、新版 Opera）和 Safari 中有效，Firefox 完全不支持该伪元素。Firefox 需要靠 scrollbar-width 和 scrollbar-color 这两个原生 CSS 属性控制，且仅作用于根滚动容器（html 或 body），对普通 div 无效。
实操建议：
- 先确认目标浏览器：若需兼容 Firefox，必须同时写两套规则
-
::-webkit-scrollbar必须配合::-webkit-scrollbar-track和::-webkit-scrollbar-thumb才能显示，只写一个不会生效 - 确保滚动容器有明确高度 +
overflow: auto（或scroll），否则无滚动条可定制 - 不要给
::-webkit-scrollbar-thumb设透明背景（如rgba(0,0,0,0)），它会彻底消失
一套代码同时兼容 Chrome 和 Firefox 的写法
下面这段 CSS 可直接复制进项目，作用于页面整体滚动条（即 html 元素）：
/* WebKit 内核（Chrome/Edge/Safari） */
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-track {
background: #f1f1f1;
}
html::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 6px;
}
html::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
<p>/<em> Firefox </em>/
html {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}</p>
说明：
-
scrollbar-width: thin对应 Firefox 的细滚动条，也可用auto或none -
scrollbar-color第一个值是滑块色，第二个是轨道色，顺序不能反 - Firefox 不支持圆角、hover 效果等，所以这部分只能靠 WebKit 规则覆盖
- 如果只想定制某个
div而非整个页面，WebKit 方案可用，但 Firefox 下该div无法自定义——这是它的硬限制
让自定义滚动条在 div 上生效的关键细节
想给一个固定高度的容器（比如聊天记录区）加自定义滚动条？WebKit 方案可行，但容易踩坑：
- 容器必须设
height（或max-height）+overflow-y: auto - 伪元素选择器要写在容器本身上，例如：
.chat-container::-webkit-scrollbar { ... } - 不要用
overflow: scroll强制显示滚动条，它会在无内容时也占位，影响布局 - 移动端（iOS Safari）对
::-webkit-scrollbar支持极差，基本不可用；Android Chrome 可用但 thumb 尺寸可能异常小 - 滚动条宽度设太小（如
6px）在高分屏下可能被系统忽略，建议不低于8px
性能与可访问性提醒
自定义滚动条不是纯视觉装饰，它会影响实际交互：
- 过度缩小 thumb 尺寸（
width: 4px）会显著降低触控/鼠标精度，尤其对中老年用户不友好 - 完全隐藏滚动条（
scrollbar-width: none或display: none）会导致键盘用户无法用PageDown等键滚动，违反 WCAG 基本可访问性要求 - 避免在滚动条上加复杂动画（如渐变、阴影），可能触发重绘，造成滚动卡顿
- 深色模式下注意对比度：若背景是深灰，thumb 用浅灰但亮度差不够，会导致难以识别
真正难的不是写出样式，而是判断哪些容器值得定制、哪些该交给系统默认——尤其当产品要上架 App Store 或通过政企验收时，滚动条行为常被纳入无障碍审查项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
