滚动条在侧边栏不显示或失效的主因是父容器设 overflow: hidden 或未定义高度/最大高度；需确保滚动容器（如.sidebar-nav）设 max-height 和 overflow-y: auto，并将::-webkit-scrollbar 样式作用于该容器，同时兼顾 firefox 的 scrollbar-width/color 及可访问性要求。
滚动条在侧边栏里不显示或失效
常见原因是父容器设置了 overflow: hidden 或未定义高度/最大高度，导致子元素滚动行为被截断。侧边栏通常用 position: fixed 或 flex 布局，但若内部导航列表没有明确的可滚动上下文（比如没设 max-height、没加 overflow-y: auto），自定义滚动条就根本不会触发。
实操建议：
- 确保侧边栏容器有固定高度（如
height: calc(100vh - 64px)）或显式max-height - 导航列表（如
<ul class="sidebar-nav"></ul>）需设置overflow-y: auto，不能只靠外层容器撑开 - 避免在父级使用
overflow: hidden，它会直接屏蔽子元素的滚动能力 - 若用 Flex 布局，确认
flex-direction: column且子项未设置flex-shrink: 0导致溢出被压缩
WebKit 浏览器下 ::-webkit-scrollbar 不生效
::-webkit-scrollbar 只在 Safari、Chrome、Edge（Chromium 内核）中有效，且必须作用于**有滚动行为的元素本身**，不是它的父容器。很多人写成 .sidebar::-webkit-scrollbar，但实际滚动发生在 .sidebar-nav 上，样式就挂了。
实操建议：
- 把伪元素规则写在真正发生滚动的容器上，例如：
.sidebar-nav::-webkit-scrollbar - 必须同时定义
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，否则部分旧版 Chrome 可能不渲染 - 不要依赖
width/height单独设置——横向滚动条用height，纵向用width；侧边栏基本都是纵向，所以统一用width - 给
thumb加border-radius和背景色即可实现“圆角细条”，无需 JS 插件
Firefox 和 IE 中滚动条无法自定义
Firefox 从 64 版本起支持 scrollbar-width 和 scrollbar-color，但仅限于控制宽度和颜色，不支持轨道/滑块的精细样式；IE 完全不支持任何 CSS 自定义滚动条。这意味着纯 CSS 方案在非 WebKit 浏览器中必然降级。
实操建议：
- 用
scrollbar-width: thin+scrollbar-color: #888 #f5f5f5覆盖 Firefox（仅对根滚动或有overflow的元素生效） - IE 用户只能接受原生滚动条，不必强求一致；若项目仍需兼容 IE，应优先保证功能可用性而非视觉统一
- 如需全浏览器统一外观，得引入轻量 JS 库（如
simplebar），但它会替换原生滚动逻辑，可能影响键盘导航（Tab、Home/End）和触屏惯性滚动 - 注意：JS 滚动库会创建新 DOM 节点，若侧边栏有
position: sticky或transform相关定位，容易错位
自定义滚动条影响可访问性
过窄的滚动条（如 width: 4px）、低对比度颜色（如灰字配浅灰轨）、或移除拖拽区域（仅靠 hover 显示），都会让屏幕阅读器用户、低视力用户或触屏用户难以操作。WCAG 2.1 明确要求交互控件最小尺寸为 44×44px。
实操建议：
- 保持
::-webkit-scrollbar-thumb最小宽度 ≥ 8px，推荐 10–12px - 拇指颜色与轨道色对比度至少 3:1（可用
color-contrast工具验证） - 避免用
opacity: 0隐藏滚动条再靠 hover 显示——键盘用户无法触发 hover，也无法用方向键滚动 - 若用 JS 替换滚动条，务必添加
aria-hidden="false"和键盘事件监听（ArrowUp/PageDown等）
最易被忽略的一点：滚动条样式在高 DPI 屏幕或缩放 125% 以上时可能变模糊或错位，建议用 rem 或 em 而非固定 px 控制尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
