局部滚动容器必须有明确尺寸限制，否则不会触发滚动；需设height或max-height约束高度，配合overflow-y: auto（推荐）与overflow-x: hidden，并注意父容器flex布局、绝对定位及touch-action等隐蔽失效因素。
局部滚动容器必须有明确尺寸限制
没有宽高限制的 div 不会触发局部滚动，哪怕内容再多——它会无限制撑开，永远不“溢出”。overflow: auto 只在内容尺寸 > 容器可视区域时才起作用。
常见错误是只写 overflow-y: auto 却漏掉高度控制：
-
height: 200px：固定高度，内容少时留白，多时才滚动（刚性） -
max-height: 200px：更推荐，内容少时不占满，多时才截断滚动（弹性） -
min-height或flex: 1单独用不管用，必须配合max-height或height - 响应式场景下，
max-width: 100%+max-height: 30vh比死写像素值更安全
overflow-x 和 overflow-y 必须分开设，不能依赖默认
overflow: auto 是 xy 双向联合判断：只要任一方向溢出，就可能显示两个滚动条。但多数场景只需要单向滚动（比如表格横向拖动、列表纵向滑动），这时必须显式拆开设置。
关键点：
-
overflow-y: auto+overflow-x: hidden才能确保只纵滚、横不滚 - 单独设
overflow-y: scroll时，overflow-x默认是visible（不裁剪、也不滚动），不是hidden - 移动端 iOS Safari 对
overflow-x: hidden支持稳定，但若父级有transform或will-change，可能意外解除裁剪
滚动失效的三个隐蔽原因
写了 max-height 和 overflow-y: auto 却没滚动？大概率卡在这三处：
- 父容器用了
display: flex且没设flex-shrink: 0或min-height: 0，导致子容器被压缩为 0 高度（Chrome 尤其明显） - 容器内元素用了
position: absolute或transform，脱离文档流，scrollHeight计算失准，视觉上“内容没溢出” - CSS 中写了
touch-action: none或touch-action: pan-x，在 iOS 上直接禁掉纵向滚动手势
移动端纵向滚动要加 touch-action: pan-y
iOS Safari 默认对带 overflow-y: auto 的容器启用 touch-action: auto，但在某些复合布局（如嵌套 position: relative + transform）下会误判为“不可滚动”，导致手指划不动。
稳妥写法：
- 给滚动容器加
touch-action: pan-y（仅允许纵向拖拽） - 同时确保父级没覆盖这个属性，比如
body { touch-action: manipulation }会继承干扰 - 不要写
touch-action: auto—— 它在 iOS 上实际等价于none，尤其在非容器中
clientHeight”。所有样式和 JS 行为，都得围绕这个事实校准。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
