根本原因是父级未传递高度或flex子项未显式约束尺寸；需确保直接父级有height:100dvh或flex:1，滚动容器设max-height:100%+overflow-y:auto，并在iOS加-webkit-overflow-scrolling:touch。
局部滚动容器高度突然变小或不撑满怎么办
根本原因是父级未传递高度，或 flex 布局中子项未显式约束尺寸。浏览器不会自动把视口高度“透传”给嵌套的 overflow-y: auto 容器，尤其当它位于 flex 或 grid 子项里时。
常见现象：左侧栏设了 overflow-y: auto，但滚动条只出现在顶部一小段；弹窗里的列表拉不到底部；聊天窗口高度随消息增多反而收缩。
- 确保滚动容器的**直接父级**有明确高度来源：用
height: 100dvh替代100vh（防移动端地址栏抖动），或设flex: 1+overflow: hidden - 滚动容器自身别依赖
height: 100%—— 改用max-height: 100%或flex: 0 0 auto，并配overflow-y: auto - 若父级是
display: flex; flex-direction: column，该容器需加align-self: stretch或显式height: 100%，否则 flex 会按内容高度收缩，overflow失效 - 检查是否有
position: fixed元素意外脱离文档流，导致父容器高度计算为 0
Flex 布局下局部滚动突然失效的典型修复点
Flex 容器默认“撑满可用空间”，但这个“可用空间”必须被明确定义，否则子项高度塌陷，overflow 形同虚设。
错误写法：.container { display: flex; } .sidebar { overflow-y: auto; } —— 此时 .sidebar 高度由内容决定，没空间可滚。
立即学习“前端免费学习笔记（深入）”；
- 在
.container上加height: 100dvh或flex: 1，并设overflow: hidden（防子项溢出破坏布局） -
.sidebar必须设height: 100%或max-height: 100%，且不能是flex: 1（它会让容器试图填满，而非创建滚动上下文） - 如果
.sidebar是flex-direction: column的子项，加min-height: 0—— 否则子元素可能撑高容器，导致overflow不触发 - 避免对滚动容器同时设
transform和overflow，某些 iOS 版本会跳过滚动上下文创建
动态加载内容后局部滚动高度错乱
图片、异步文本、第三方组件插入后，容器高度突增，但 scrollTop 还停在旧位置，目标元素“掉出”视口；或者新内容没触发重排，滚动条不出现。
这不是 JS 没监听，而是浏览器渲染时机问题 —— 内容插入和 layout 计算不同步。
- 图片务必提前占位：用
aspect-ratio（现代浏览器）或padding-top百分比（兼容方案），避免加载后布局抖动 - 插入 DOM 后，不要立刻读
scrollHeight或设scrollTop；改用requestAnimationFrame延迟到下一帧再操作 - 若用框架（如 React/Vue），确保在
useEffect/onMounted的 cleanup 阶段清除旧的scrollTop监听，避免多次绑定 - Safari 对动态内容的
overflow重绘较慢，可临时触发重排：el.style.height = el.offsetHeight + 'px'
移动端局部滚动卡顿或不响应 touch
iOS Safari 和部分 Android WebView 下，overflow-y: auto 容器常表现为“点得中、滑不动”或滚动生硬，不是性能差，是缺失关键样式开关。
-
viewportmeta 标签必须同时含width=device-width和initial-scale=1.0，缺一不可；漏掉initial-scale会导致 touch 坐标偏移 - 滚动容器必须加
-webkit-overflow-scrolling: touch—— 尽管标记为 deprecated，2026 年仍是 iOS/Android 惯性滚动唯一可靠方式 - 该属性仅对
position: relative、absolute或fixed容器生效；static容器下会被忽略 - 禁用
transform: translateZ(0)或will-change: transform，它们在 iOS 16+ 会触发渲染层分裂，反而卡顿
overflow 失效。最易被忽略的是：没确认父级是否真有高度，以及没等 layout 完成就操作 scrollTop。 
