scrollbar-width 仅在 firefox 中控制滚动条显示策略（auto/thin/none），不控制粗细；chrome/edge/safari 需用 ::-webkit-scrollbar 伪元素设 width/height 实现视觉变细，二者互斥且无跨浏览器统一方案。
scrollbar-width 不是控制滚动条“粗细”的属性
它只在 Firefox 中有效，且仅用于切换滚动条的显示策略：auto（默认）、thin（窄样式）、none（隐藏）。scrollbar-width 对滚动条的像素宽度、颜色、轨道/滑块形状等没有任何控制力，也不能在 Chrome / Safari / Edge 中生效。
Chrome 和 Edge 中没有等效的 scrollbar-width 属性
Chromium 系列浏览器（包括 Chrome、Edge、新版 Opera）不支持 scrollbar-width，也不提供任何标准 CSS 属性来直接设置滚动条“宽度”或“粗细”。你看到的所谓“变细”，其实是通过伪元素 + width/height 覆盖实现的：
-
::-webkit-scrollbar是唯一可设尺寸的入口，但它不是标准属性，仅限 WebKit/Blink 内核 - 对
::-webkit-scrollbar设置width（垂直滚动条）或height（水平滚动条）才能改变视觉粗细 - 这个宽度值会受父容器
overflow设置影响——如果父容器没设overflow: auto或类似值，伪元素根本不会渲染
Firefox 的 scrollbar-width: thin 实际效果很有限
它不等于“把滚动条设为 6px 宽”，而是由 Firefox 自行决定一个紧凑样式，具体表现因系统主题、字体缩放、高 DPI 设置而异。常见问题包括：
- 在 macOS 上几乎无变化（系统偏好设置优先级更高）
- 即使设为
thin，仍可能比 WebKit 的::-webkit-scrollbar默认宽（12–17px）更厚 - 无法与
scrollbar-color组合出精确配色，颜色支持也仅限于 track/thumb 两级
真正可控的“粗细”只存在于 WebKit 伪元素中
如果你必须统一控制宽度，只能面向 Chromium 做适配，并接受 Firefox 降级为 scrollbar-width: auto 或忽略：
/* 只在 Chrome/Edge/Safari 生效 */
.container {
overflow-y: auto;
}
.container::-webkit-scrollbar {
width: 8px; /* 垂直滚动条宽度 */
}
.container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
注意：width 设太小（如 2px）会导致 thumb 不可拖拽；设太大（如 24px）在窄容器中会挤压内容区域。真实项目中建议保持 6–12px 区间，并始终搭配 overflow 显式声明。
跨浏览器滚动条样式本质是妥协方案：WebKit 用伪元素暴力定制，Firefox 用两个 magic 字符串做轻量提示，而 Safari 在 iOS 上完全禁用自定义。最易被忽略的一点是——scrollbar-width 和 ::-webkit-scrollbar 永远不会共存生效，它们是互斥路径，不是叠加配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
