滚动条宽度由::-webkit-scrollbar的width（垂直）或height（水平）控制，仅Webkit浏览器生效；Firefox不支持该伪元素，无法缩窄。
滚动条宽度由 ::-webkit-scrollbar 的 width 或 height 控制
局部滚动条（比如某个 .innerbox）太宽，根本原因是它的 ::-webkit-scrollbar 伪元素设置了过大的 width 值。这个值默认不继承，必须显式设置，且只在 WebKit 内核浏览器（Chrome、Edge、Safari）生效。
常见错误是直接写全局样式，结果所有滚动条都被改了；或者漏掉选择器前缀，导致样式没命中目标元素。
- 确保选择器精确匹配容器，例如：
.innerbox::-webkit-scrollbar，不能只写::-webkit-scrollbar -
width控制垂直滚动条粗细，height控制水平滚动条高度，二者互不影响 - 建议设为
6px～8px：再窄容易点不动，再宽（如默认17px）在紧凑布局里很突兀 - Firefox 不支持
::-webkit-scrollbar，它用原生滚动条，无法通过 CSS 缩窄——这点常被忽略
overflow-y: auto 容器里滚动条仍太宽？检查是否误设了 height
如果给 ::-webkit-scrollbar 设了 height: 4px，但垂直滚动条还是宽得离谱，大概率是误把 height 当成了滚动条“粗细”——它其实控制的是**水平滚动条的厚度**，对垂直滚动条完全无效。
垂直滚动条的宽度只认 width。下面这段代码就是典型错例：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
.innerbox::-webkit-scrollbar {
height: 6px; /* ❌ 这行对垂直滚动条没作用 */
width: 12px; /* ✅ 才是关键 */
}- 删掉无意义的
height，除非你真在自定义水平滚动条 - 若同时需要水平 + 垂直滚动条，两个属性都要设，但各自作用域不同
- 某些旧版 Chrome 对
width小于6px渲染异常，建议不低于6px
为什么改了 width 滚动条还是没变窄？
最常踩的坑不是 CSS 写错，而是样式没生效——原因往往藏在层叠或作用域里。
- 父容器或祖先元素有
overflow: hidden，直接截断了滚动条渲染区域 - CSS 文件加载顺序靠后，被前面同名规则覆盖，加
!important临时验证（仅调试用） - 用了 Shadow DOM 或框架（如 Vue 的
scoped），普通 CSS 选择器无法穿透，需用:host ::-webkit-scrollbar或全局样式 - 容器未触发滚动（内容没溢出），
::-webkit-scrollbar根本不渲染，先确认height和内容高度差足够
Firefox 和 Safari 下滚动条宽度不可控，怎么办？
这是现实限制：::-webkit-scrollbar 是 WebKit 专属，Firefox 完全无视，Safari 自 macOS Big Sur 起也逐步弱化支持。你调得再细，用户切到 Firefox 就看到原生宽条。
没有通用缩窄方案，只有务实取舍：
- 接受 Firefox 的原生宽度（通常约
17px），只在 WebKit 环境做优化 - 用
overflow: overlay让滚动条浮在内容上，视觉上“不占空间”，但宽度本身没变 - 极端场景可 JS 检测
navigator.userAgent，对 Firefox 隐藏滚动条轨道（::-webkit-scrollbar-track无效，但可换思路）
真正难处理的从来不是怎么改窄，而是改窄之后，在不同系统、不同浏览器里滑块点击热区是否还够用——6px 宽度下，手抖一点就拖不动，这点比样式本身更值得提前验证。
