局部滚动容器需有明确高度才能启用 overflow-y: auto，常见错误是父级无高导致 height: 100% 计算为 0；应确保高度链贯通，推荐用 100dvh、calc(100vh - 固定值) 或 max-height；flex 布局中可用 flex: 1；bootstrap 卡片滚动需同时满足 card 有高度、card-body 用 max-height: 100% + overflow-y: auto、html/body 设 overflow: hidden；ios safari 需避免 body height: 100%、正确设置 -webkit-overflow-scrolling: touch 并防止误拦截 touchmove；自定义滚动条需成套声明伪元素且目标为块级有显式尺寸的容器，firefox 使用 scrollbar-width 和 scrollbar-color。
局部滚动容器没高度，overflow-y: auto 就是摆设
浏览器根本不会给一个“不知道多高”的容器启用滚动——overflow-y: auto 只有在容器存在明确可滚动空间时才生效。常见错误是只写 height: 100%，但父级没高度，结果算出来是 0px。
必须向上确认高度链是否贯通：从 html、body 开始，逐级检查是否有显式高度约束。推荐直接用 100dvh（比 100vh 更稳，能响应移动端地址栏变化）或 calc(100vh - 120px)（减去 header + footer 高度）。
-
max-height: 400px最简单，适合内容长度相对固定的场景 - Flex 布局中，父容器设
display: flex; flex-direction: column，滚动区用flex: 1占满剩余空间 - 绝对定位容器内要滚动？不能靠
height: 100%，得用calc()手动减去已知固定部分，或改用display: flex套一层
.card-body 滚动失效，三个条件缺一不可
Bootstrap 5 的 .card 内部滚动不是加个 overflow-y: auto 就完事。它卡在三个硬性前提上：
-
.card自身必须有height或max-height（比如height: 500px） -
.card-body不能写height: 100%（会撑满并截断），而应写max-height: 100%+overflow-y: auto -
html, body要加overflow: hidden，否则滚动会“穿透”到全局，看起来像没反应
另外，.h-100 这类工具类只是 height: 100% 的快捷写法，不解决父级无高问题，别指望它自动传递高度。
iOS Safari 局部滚动突然不灵，先查这三处
iOS WebKit 对滚动上下文更敏感，很多写法在 Chrome 正常，在 Safari 就失效：
- 删掉所有
html, body { height: 100% }，换成min-height: 100vh或min-height: 100dvh -
-webkit-overflow-scrolling: touch必须写在实际滚动容器上（如.list-container），且该容器必须有height或max-height；写在body上无效 - 检查 JS 是否无差别调用了
touchmove.preventDefault()，尤其轮播图或手势组件；正确做法是只对非滚动区域拦截：if (!e.target.closest('.scrollable')) e.preventDefault()
滚动条样式不显示，::-webkit-scrollbar 不是写了就行
这个伪元素极其娇气，漏掉任一环节就完全隐身：
- 必须成套声明：
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb一个都不能少 - 目标容器必须是块级元素，且已设
overflow-y: auto和显式width/height（::-webkit-scrollbar自身还得设width或height） - 不能挂在
html或body上试图全局生效；它只作用于当前元素的滚动上下文 - Firefox 只认
scrollbar-width和scrollbar-color，且只接受auto/thin/none和严格两参数顺序：scrollbar-color: #666 #eee
真正在意移动端体验的话，别强求定制滚动条——iOS/macOS 系统设置能直接覆盖 CSS，且 Safari 对伪类支持极弱，优先保证滚动功能可用，样式其次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
