核心是容器必须有明确高度限制且内容实际高度超出它，再配overflow-y: auto；常见失效原因是父级flex未设max-height或height计算为auto而非具体像素值。
局部容器要出现竖向滚动条，核心就一条：容器必须有明确高度限制 + 内容实际高度超出它，再配 overflow-y: auto 或 scroll。
为什么设置了 overflow-y 却没滚动条？
最常见原因是容器没“真正被限制高度”——比如父元素是 display: flex 且没设 max-height，或用了 height: 100% 但祖先链里某个父级高度为 auto，导致计算结果还是撑开。
- 检查该容器的
computed height是否为具体像素值（如400px），而不是auto或100% - 若用 Flex 布局，
flex-direction: column的容器必须加max-height（不能只靠min-height）才能触发溢出 -
overflow-y: auto只在内容真实溢出时才显示滚动条；overflow-y: scroll则强制显示（哪怕没溢出），适合 UI 预留空间一致的场景
Flex 容器内启用竖向滚动的典型写法
Flex 容器默认会伸缩以容纳子项，所以光写 overflow-y: auto 不起作用。必须切断“自动拉伸”行为：
- 给容器设
max-height（例如max-height: 300px），而非仅height或min-height - 确保子元素不通过
flex-grow: 1吃掉全部剩余空间（除非你希望它占满后才滚动） - 推荐组合：
display: flex; flex-direction: column; max-height: 300px; overflow-y: auto;
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.list-container {
display: flex;
flex-direction: column;
max-height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
}
.item {
padding: 8px;
border-bottom: 1px solid #eee;
}
移动端滚动卡顿或惯性失效怎么办？
iOS Safari 和部分安卓 WebView 对局部滚动容器的惯性滚动支持较弱，容易一碰就停：
- 加
-webkit-overflow-scrolling: touch（仅 WebKit 内核有效，已逐步废弃但仍有实效） - 避免在滚动容器上同时设置
transform、will-change或大量box-shadow，这些会干扰合成层判断 - 如果内容是列表，优先用
position: relative+top动画替代scrollTop手动控制，减少重排压力
滚动条样式怎么改？
Webkit 内核（Chrome/Safari/Edge）支持伪元素定制，但仅限垂直方向且不跨浏览器：
- 必须先有
overflow-y: scroll或auto，否则伪元素不渲染 -
.container::-webkit-scrollbar控制整体尺寸 -
.container::-webkit-scrollbar-track设轨道背景 -
.container::-webkit-scrollbar-thumb设滑块颜色和圆角 - Firefox 用
@scrollbar规则（支持度有限），不要指望全平台统一外观
关键点：滚动条样式只是装饰，不影响功能；别为兼容性牺牲可访问性（比如把滑块缩到 2px 宽，用户根本点不中）。
真正容易被忽略的是：滚动容器内部如果有 position: fixed 元素，它会脱离容器定位流，可能悬在页面任意位置甚至被裁剪——这种错位问题往往要等上线后用户反馈才暴露。
