scrollbar-width 是 Firefox 专属属性，Chrome 完全不识别；Chrome/Edge/Safari 需用 ::-webkit-scrollbar 系列伪元素控制滚动条，且须确保容器有溢出、正确滚动上下文及 HTTPS 或 localhost 环境。
scrollbar-width 是 Firefox 专属属性，Chrome 完全不识别
直接在 Chrome 里写 scrollbar-width: thin 或 scrollbar-width: none 不会报错，但样式根本不会应用——DevTools 的 Styles 面板里甚至不会显示这条声明被解析。这不是你漏写了 selector，也不是拼写错误，而是该属性压根不在 Chromium 内核的 CSS 属性白名单中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Firefox 下用
scrollbar-width+scrollbar-color是标准做法，简洁可靠 - Chrome/Edge/Safari 必须切换思路：用
::-webkit-scrollbar系列伪元素手动控制轨道和滑块 - 不要试图用
@supports (scrollbar-width: thin)做特性检测——它在 Chrome 中永远返回 false，且无法触发回退逻辑
::-webkit-scrollbar-thumb 不生效的常见原因
写了 ::-webkit-scrollbar-thumb { background-color: #666; } 却看不到颜色变化？大概率不是选择器错了，而是滚动容器本身没“激活”滚动上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认容器有明确的
height或max-height，且设置了overflow-y: auto或scroll -
::-webkit-scrollbar本身不接受width，真正决定纵向滚动条视觉宽度的是::-webkit-scrollbar-thumb的width（横向滚动条则看height） - 如果容器内容没溢出、或父级有
overflow: hidden/transform，伪元素可能被裁剪或不渲染 - 旧版 Safari 对
border-radius和opacity支持不稳定，优先用background-color+border: none组合
Chrome 120+ 后本地开发失效：file:// 或 HTTP 页面被静默拦截
你在本地双击 HTML 文件打开，或用 Python http.server 起服务但没配 HTTPS，::-webkit-scrollbar 样式会完全不加载——控制台无报错，Elements 面板里也看不到规则被应用。这是 Chrome 从 120 版本起强制实施的安全策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 开发时必须走
https://或http://localhost（注意是 localhost，不是 127.0.0.1） - VS Code 可装 Live Server 插件，默认启 localhost；Vite/Next.js 等工具链默认满足
- 避免在
::-webkit-scrollbar规则中使用 CSS 变量（如var(--color)）或calc()，它们会被忽略
body 滚动条样式失效：实际滚动容器可能是 html
给 body 写 ::-webkit-scrollbar-thumb 没反应？因为多数现代页面的实际滚动容器是 html 元素——尤其是当 body 没设 height: 100%，而 html 有 height: 100% 时，滚动行为会挂在 html 上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先检查 Elements 面板里哪个节点在响应滚轮事件（滚动时高亮的那个）
- 更稳妥的写法是同时覆盖：
html::-webkit-scrollbar-thumb和body::-webkit-scrollbar-thumb - React/Vue 项目中，框架生成的 wrapper 节点（如
#root）可能才是真实滚动容器，需针对性设置
