滚动条在Chrome/Firefox中默认隐藏，需用.force-scrollbar类配合::-webkit-scrollbar和@supports (-moz-appearance: none)强制显示；iOS/Android不支持或禁用滚动条UI，应改用自定义提示；overflow预留空间会影响布局，需用padding-right或Flex/Grid规避。
滚动条在 Chrome/Firefox 里突然不显示了
不是消失了，是被浏览器默认隐藏了——特别是 macOS 和新版 Windows 的 Chromium 内核（Chrome、Edge）会把 overflow: auto 或 overflow: scroll 的滚动条渲染成“仅悬停时出现”的透明样式，视觉上就是“没 scrollbar”。Firefox 默认仍显示，但行为也可能被 CSS 覆盖。
常见错误现象：div 明明内容溢出、能滚、键盘能上下翻，但滚动条始终不可见；用鼠标滚轮或触摸板能动，就是找不到拖拽轨道。
- 检查是否误加了
::-webkit-scrollbar { display: none; }或width: 0 - 确认父容器没有
overflow: hidden拦截了子元素的滚动触发 - macOS 下 Safari/Chrome 默认启用“自动隐藏滚动条”，无法靠 hover 触发时，大概率是容器没获得焦点或未满足滚动条件（比如子元素未设
height或max-height）
让滚动条强制可见（跨浏览器兼容写法）
核心思路：重置 WebKit 的伪元素 + 补全 Firefox 的 scrollbar-width 控制。不能只写 ::-webkit-scrollbar，否则 Firefox 仍可能收起。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对需要显示滚动条的容器加类名，比如
.force-scrollbar - 用以下 CSS 覆盖默认行为（注意顺序，
!important在部分旧版 Safari 中仍是必要的）：
.force-scrollbar {
overflow-y: auto;
}
.force-scrollbar::-webkit-scrollbar {
width: 8px;
}
.force-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.force-scrollbar::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
@supports (-moz-appearance: none) {
.force-scrollbar {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
}⚠️ 注意：scrollbar-width: thin 在 Firefox 中只是“建议”，实际宽度仍由 UA 决定；scrollbar-color 只控制 thumb 和 track 颜色，不控制显隐。
移动端（iOS Safari / Android Chrome）滚动条不显示的真相
iOS Safari 完全不支持 ::-webkit-scrollbar，Android Chrome 虽支持但默认禁用滚动条 UI —— 这不是 bug，是平台级设计：移动设备靠惯性滚动+手势，不需要视觉滚动条。
如果你真需要提示用户“这里可滚动”，得自己加 UI：
- 用
position: absolute在右边缘画一个模拟 thumb（需 JS 监听scroll更新位置） - 首次进入时短暂显示一个向上的箭头动画（
animation: fadeSlideUp 0.3s），暗示有更多内容 - 避免监听
touchmove自己实现滚动，容易和原生卡顿、回弹冲突
强行 hack 滚动条只会增加维护成本，且 iOS 上根本无效。
滚动条影响布局？别让 overflow 悄悄吃掉宽度
当容器设了 overflow: auto，WebKit 浏览器会在内容区右侧预留滚动条空间（即使滚动条被隐藏）。如果容器宽度是 100% 或 calc(100% - Xpx)，这个预留空间会让内容被压缩，出现意外换行或错位。
解决方案分场景：
- 已知内容固定高度 → 改用
overflow: overlay（仅旧版 WebKit 支持，现已废弃，不推荐） - 现代方案：用
overflow: auto+padding-right: calc(100vw - 100%)补平滚动条占位（需配合box-sizing: border-box） - 最稳做法：给容器设
width: max-content或用 Flex/Grid 布局绕过宽度计算依赖
这个宽度偏移在调试时很难一眼发现，尤其当父容器用了 flex: 1 或 grid-column: span 2 时，表现会更隐蔽。
滚动条的显隐逻辑背后是操作系统、浏览器内核、CSS 规范三者博弈的结果，调样式前先确认目标平台和用户交互习惯，比硬套一套“通用 CSS”更有效。
