模态弹窗滚动条不显示需设 overflow-y: scroll 而非 auto；自定义滚动条须确保容器尺寸固定、内容真溢出，且 webkit 和 firefox 各有严格语法与限制，ios safari 则完全不支持。
模态弹窗滚动条不显示？先确认 overflow-y 是否设为 scroll
模态弹窗（如 .modal-body）内容溢出却没滚动条，大概率是用了 overflow-y: auto。缩放或动态内容加载后，浏览器可能误判“未溢出”，导致滚动条消失——这不是样式失效，而是滚动机制根本没启用。
必须显式写 overflow-y: scroll，强制激活垂直滚动通道：
.modal-body {
max-height: 60vh;
overflow-y: scroll; /* ✅ 不是 auto */
overflow-x: hidden;
}
-
max-height建议用vh单位，避免缩放时计算失准 - 别依赖
height: 100%，父容器若无明确高度，子元素的百分比会塌陷 - 移动端 Safari 对
overflow: overlay已废弃且无视，直接忽略
.modal-body::-webkit-scrollbar 样式无效？检查容器是否“真滚动”
::-webkit-scrollbar 只对「实际触发滚动的块级元素」生效，不是所有带 overflow 的 div 都能响应。常见失效原因：容器没设固定尺寸、内容未真正溢出、或伪元素挂错位置。
正确写法必须成套、限定作用域：
.modal-body {
width: 100%;
max-height: 60vh;
overflow-y: scroll;
}
<p>.modal-body::-webkit-scrollbar {
width: 8px; /<em> 垂直滚动条只认 width </em>/
}</p><p>.modal-body::-webkit-scrollbar-track {
background: #f5f5f5; /<em> 必须设 background，否则透明 </em>/
border-radius: 4px;
}</p><p>.modal-body::-webkit-scrollbar-thumb {
background: #888; /<em> 必须设 background，否则不可见 </em>/
border-radius: 4px;
}</p><p>.modal-body::-webkit-scrollbar-thumb:hover {
background: #555;
}</p>
- 漏掉
::-webkit-scrollbar-track或::-webkit-scrollbar-thumb中任意一个，整个自定义逻辑会被浏览器丢弃 - 不要写
body::-webkit-scrollbar想管弹窗——它只影响页面根滚动，和.modal-body无关 -
border-radius别超width / 2（比如width: 8px时，border-radius: 5px会视觉截断）
Firefox 下滚动条还是默认样式？scrollbar-color 必须配 scrollbar-width
Firefox 完全无视 ::-webkit-scrollbar，只响应 scrollbar-width 和 scrollbar-color，而且这两个属性**只对设置了 overflow 的块级容器本身生效**，不能靠继承。
关键点：必须同时写，且顺序、值都严格：
.modal-body {
scrollbar-width: thin; /* 只接受 auto / thin / none */
scrollbar-color: #888 #f5f5f5; /* thumb 在前，track 在后 */
}
-
scrollbar-width: thin是开启scrollbar-color生效的前提；设auto时颜色设置被忽略 - 第二个参数（track）设
transparent会导致轨道“隐形”，但滑块仍可拖——体验差，不推荐 - 别写在
:root或html上想全局控制——对嵌套的.modal-body无效
iOS Safari 和部分 macOS Safari 滚动条样式完全不渲染？这是设计限制
iOS/iPadOS Safari（包括 17.x 及更新版本）明确不支持任何滚动条 CSS 自定义，无论你写多少 ::-webkit-scrollbar 或 scrollbar-color，它都当没看见。这不是 bug，是苹果的主动限制。
这意味着：如果你的用户群含大量 iOS 用户，且设计强依赖滚动条外观（比如圆角+悬停变色），原生方案必然失败。
- 测试时别用 macOS Safari 替代 iOS Safari——两者渲染差异极大
- 优先保障「内容可滚动」而非「样式一致」，iOS 用户习惯手势拖拽，滚动条可视性本就低
- 真要统一外观，只能引入 JS 库（如
simplebar），但它会替换原生滚动逻辑，可能影响性能与屏幕阅读器兼容性
滚动条样式在模态弹窗里最易被忽略的，其实是「容器是否真正具备滚动上下文」——尺寸、溢出判断、浏览器内核限制三者缺一不可。别指望一套 CSS 打遍所有平台，先让滚动可用，再谈美观。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
