局部信息流能滚动的前提是容器有明确高度边界且内容实际溢出；只写overflow-y:auto而未设height或max-height，scrollTop永远为0。
局部信息流能滚动，前提是容器有明确高度边界且内容实际溢出——只写 overflow-y: auto 但没设 height 或 max-height，scrollTop 永远是 0。
为什么信息流容器加了 overflow-y 还是不滚动
常见错误不是属性写错，而是布局前提缺失：
- 父级用了
display: flex但没给子容器加flex-shrink: 0，导致高度被压缩到 0 - 容器高度用
%却没给父级设固定高，浏览器无法解析“100% 高度”到底多高 - 子项用了
display: contents或visibility: hidden，内容高度计算失效 - 信息流由 JS 动态插入（如 React 列表），首次渲染时内容还没加载完，容器高度暂时不足
信息流容器必须设 height/max-height 才生效
固定高度是触发滚动上下文的硬门槛，不能靠 min-height 或内容撑开代替：
-
height: 400px、max-height: 70vh、height: 25rem都可，优先选px或vh避免嵌套计算误差 - 若信息流高度需响应式变化（如移动端缩窄），用
@media重设max-height，别依赖 JS resize 监听 - Flex 子项中，务必加
flex-shrink: 0，否则即使写了height: 300px也会被压缩塌陷
JS 控制滚动位置时别直接赋值 scrollTop
手动设 container.scrollTop = 0 虽快，但不平滑、不兼容 Safari 旧版，且在高 DPI 屏易误判边界：
立即学习“前端免费学习笔记（深入）”；
- 回顶用
container.scrollTo({ top: 0, behavior: 'smooth' })，兼容性好（IE11+ 支持behavior: 'auto'） - 滚动到某条消息，先确认
container.contains(target)，再用target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop算偏移 - 判断是否到底部别用
scrollTop === scrollHeight - clientHeight，改用scrollTop > scrollHeight - clientHeight - 0.5防 subpixel 渲染误差
图片加载导致滚动错位怎么防
点击跳转后目标“掉下去”，大概率是图片未加载完就触发了滚动——布局抖动不是 JS 错，是 CSS 占位没做：
- 图片统一加
img { aspect-ratio: 16 / 9; width: 100%; height: auto; }，原生占位最稳 - 兼容旧浏览器：图片父容器设
position: relative; padding-top: 56.25%;，内部img绝对定位填满 - 避免在
scroll事件里读scrollTop或offsetTop，强制触发 layout，卡顿明显；改用IntersectionObserver监听可见性
真正难的不是让容器滚起来，而是当信息流动态增删、图片异步加载、容器尺寸响应变化时，滚动位置还能稳住不跳、不卡、不错位——这些细节全靠 CSS 占位和 JS 边界校验兜底，不是加个 overflow 就完事。
