设置 overflow-y: scroll 强制显示垂直滚动条需容器有明确高度约束（如 height 或 max-height），仅 min-height 无效；scroll 始终保留滚动条占位，auto 按需显示；ios safari 默认隐藏滚动条，css 无法强制常显。
直接写 overflow-y: scroll 就能强制显示垂直滚动条，但必须满足一个前提：容器得有明确的、可计算的高度约束。
必须设置 height 或 max-height
只写 overflow-y: scroll 不生效，最常见的原因是容器没有高度限制。浏览器无法判断“内容是否溢出”，自然不会渲染滚动机制。
- ✅ 正确写法：加
height: 200px或max-height: 200px - ❌ 无效写法：仅用
min-height: 200px—— 它不约束上限，滚动条不会触发 - ⚠️ 注意：若父容器是 flex 布局且未设
align-items: flex-start，子元素 height 可能塌陷，建议同时加align-self: flex-start或改用max-height
避免内容撑开导致失效
即使写了 height，如果内部元素是 inline 水平（比如纯文字没换行）、浮动未清除，或存在 margin 折叠，实际高度可能仍不可控。
- 推荐给容器加
overflow: hidden触发 BFC，确保高度计算准确 - 检查是否意外设置了
display: contents或position: absolute的子元素，它们会脱离文档流，影响高度判定
注意 scroll 和 auto 的行为差异
scroll 的核心作用不是“让内容可滚”，而是“始终保留滚动条轨道空间”。它和 auto 的关键区别在于占位：
- 用
scroll：滚动条永远存在，右侧会固定留出约 17px（Chrome）宽度，布局稳定 - 用
auto：滚动条按需出现，内容区域宽度会随状态变化，可能引起界面轻微晃动 - 适合场景：
scroll多用于日志面板、代码编辑器侧边栏等需要视觉一致性的固定高度控件
移动端与浏览器兼容要点
iOS Safari 默认隐藏滚动条，即使写了 overflow-y: scroll，也只在手指滑动时短暂显示——这是系统级限制，纯 CSS 无法绕过。
- 可加
-webkit-overflow-scrolling: touch提升滚动顺滑度，但不解决常显问题 - 如需明确提示可滚动，建议配合视觉设计：顶部渐变遮罩、底部箭头图标、或容器内留白
- 自定义滚动条样式（如
::-webkit-scrollbar）在 Chrome/Safari 有效，Firefox 仅支持scrollbar-width: thin，不支持像素级控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
