滚动条不显示是因浏览器默认隐藏非交互态滚动条；chrome/safari需overflow-y:scroll强制常驻，firefox用scrollbar-width/color控制，ios safari则完全不支持自定义。
滚动条在 overflow: auto 区域里完全不显示？
不是浏览器“坏了”，而是现代 Chrome/Firefox/Edge 默认隐藏了非交互态滚动条——鼠标没悬停、没拖拽时，::webkit-scrollbar 伪元素压根不渲染。只靠 CSS 设置宽度和背景色是无效的。
必须显式触发“始终可见”行为，且仅对 WebKit 内核（Chrome/Safari/Edge）生效；Firefox 需单独用 scrollbar-width 和 scrollbar-color 控制。
- Chrome/Safari：给容器加
css { overflow-y: scroll; }，强制滚动条常驻（即使内容未溢出） - Firefox：必须写
scrollbar-width: thin;或scrollbar-width: auto;+scrollbar-color: #666 #f5f5f5; - 不要依赖
:hover显示滚动条——大屏通常无鼠标悬停，且触控设备无 hover 状态
::-webkit-scrollbar 样式失效的三个常见原因
写了但没反应？大概率卡在这三处：
- 父容器没有设置
overflow（如auto、scroll），伪元素无载体 - 滚动容器是
flex或grid布局，且子项未设min-width: 0/min-height: 0，导致内容撑不开、不触发溢出 - 样式被 Shadow DOM 或框架（如 Vue 的
scoped）隔离，需提升到全局或使用:deep()（Vue）/::part()（Web Components）穿透
最小可验证写法：
.dashboard-panel {
overflow-y: scroll;
height: 600px;
}
.dashboard-panel::-webkit-scrollbar {
width: 8px;
}
.dashboard-panel::-webkit-scrollbar-track {
background: #f5f5f5;
}
.dashboard-panel::-webkit-scrollbar-thumb {
background: #666;
border-radius: 4px;
}
大屏滚动性能差：scroll-behavior: smooth 别乱开
数据大屏常含大量 DOM 节点（如百行表格、数十个图表卡片），开启平滑滚动会触发频繁 layout + paint，造成卡顿甚至页面假死。
- 禁用
scroll-behavior: smooth，改用 JS 手动节流滚动（如requestAnimationFrame+element.scrollTop递进） - 对长列表优先用虚拟滚动（
react-window或原生IntersectionObserver），而非全量渲染 - 滚动容器避免设置
transform、filter等触发合成层的属性，否则滚动时 GPU 负载飙升
移动端 Safari 滚动条消失且无法唤出？
iOS Safari 对自定义滚动条支持极弱：::-webkit-scrollbar 完全无效，且默认滚动条仅在快速滑动瞬间闪现，无法停留。
- 别尝试 hack —— iOS 16+ 仍不支持
scrollbar-width，也无视overflow: scroll强制显示 - 替代方案：用
touch-action: pan-y;保证纵向滑动流畅，配合顶部/底部阴影渐变（box-shadow: inset）暗示可滚动 - 若必须可视化提示，用 JS 监听
touchstart后临时添加一个带透明度的div滚动指示器，touchend后 2s 自动 fade out
定制滚动条最麻烦的从来不是样式，而是跨端一致性——PC 端能精细控制，移动端只能妥协体验。真要保效果，得接受“iOS 上就是没滚动条”这个事实，转而优化滑动反馈和内容密度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
