侧边栏滚动条生效需容器显式设宽高并启用overflow-y:auto；::-webkit-scrollbar须绑定具体类名；Firefox用scrollbar-width，Safari iOS 16+默认隐藏且不支持伪元素；移动端应优先保证可用性而非样式一致。
侧边栏容器必须显式设尺寸和 overflow
不设 width 和 height，或只设 overflow: auto 但内容没溢出，滚动条根本不会出现。很多开发者卡在这一步，以为加了伪元素就能生效，其实样式根本没触发。
常见错误现象：::-webkit-scrollbar 完全无效、控制台无报错、滚动条还是系统默认样式
- 侧边栏容器（如
<aside>或<div class="sidebar">）必须有明确的width和height（或max-height） -
overflow-y: auto是必要条件；若同时要禁用横向滚动，加overflow-x: hidden - 如果侧边栏是
position: fixed，注意它脱离文档流，height: 100%不会继承父容器高，得改用height: 100vh或配合top/bottom计算
::-webkit-scrollbar 伪元素只对局部容器生效
全局写 body::-webkit-scrollbar 会影响整个页面，而侧边栏需要的是独立样式——必须把伪元素选择器绑定到具体容器类名上，否则 Chrome/Edge/Safari 下样式会“串”到其他区域。
使用场景：聊天侧边栏、权限树形菜单、折叠式导航面板
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
.sidebar::-webkit-scrollbar { width: 6px; }，不是div::-webkit-scrollbar -
::-webkit-scrollbar-thumb的background推荐用纯色或linear-gradient，避免透明度太低导致滑块不可见 -
::-webkit-scrollbar-track建议设background+border-radius，否则轨道边缘生硬，和现代 UI 不协调 - Firefox 不支持
-webkit-系列，必须补scrollbar-width: thin和scrollbar-color: #888 #f5f5f5
移动端 Safari 滚动条默认隐藏，且不响应伪元素
iOS Safari 从 iOS 16 起默认隐藏非交互态滚动条，即使你写了完整伪元素，用户不开始拖动就看不到；而且它压根不解析 ::-webkit-scrollbar，只认 scrollbar-width 这类标准属性。
性能影响：强行用 JS 模拟滚动条（如第三方库）会增加首屏渲染负担，且破坏原生惯性滚动体验
- 别在移动端强求视觉一致——接受 Safari 的隐藏策略，重点保证滚动可用性
- 若必须显示（如管理后台），可临时加
overscroll-behavior: contain防止页面回弹干扰，但不要覆盖scrollbar-width - 测试时务必真机验证：模拟器里看到的滚动条 ≠ 用户实际看到的
- 侧边栏若含大量列表项，建议加
will-change: transform到滚动容器，减少 Safari 渲染抖动
侧边栏内嵌长内容时，min-width: 0 是防溢出关键
Flex 布局下侧边栏常被设为 flex: 0 0 240px，但若内部有未折行的长 URL、代码块或表格，容器仍会被撑宽，导致横向滚动条意外出现——这时伪元素定制的只是纵向滚动条，横向的还是丑陋原生样式。
容易踩的坑：以为 overflow-x: hidden 就万事大吉，结果发现文字截断或布局错位
- 给侧边栏容器加
min-width: 0，强制 Flex 项放弃“按内容最小宽度计算”的默认行为 - 对内部文本节点加
word-break: break-word，对<pre>加white-space: pre-wrap - 若侧边栏含
<iframe>，它可能自带滚动条，需单独对其设置scrolling="no"或 CSSoverflow: hidden
scrollbar-color，一个靠忽略——没有银弹方案，只能按浏览器分层降级。 
