局部滚动容器scrollTop始终为0的根本原因是未形成有效滚动上下文，即元素缺乏明确高度边界或内容未实际溢出。
局部滚动容器为什么 scrollTop 始终为 0
根本原因是容器没形成有效的滚动上下文——浏览器只对「有明确高度边界 + 内容实际溢出」的元素启用垂直滚动。常见错误包括：height: 100%但父级无高度、min-height代替height、Flex 子项被压缩（缺flex-shrink: 0）、父级用了transform或contain: layout截断滚动链。
调试时直接在控制台执行：console.log(container.scrollHeight, container.clientHeight, container.scrollTop)。如果前两者相等或scrollTop恒为 0，说明滚动根本没生效，别急着写 JS 逻辑。
- 必须用
height或max-height（单位推荐px/vh），不能靠内容撑高 - Flex 布局中，滚动容器的**直接父级**要加
overflow: hidden或显式高度 - 避免
overflow: hidden父级包裹滚动容器——它会直接吃掉滚动事件
scrollIntoView 在局部容器里目标总被遮住
不是 JS 算错了 offset，是浏览器默认把目标元素顶部对齐容器顶部，而你页面顶部有固定 header 或 padding。硬算getBoundingClientRect()再减去 header 高度，既脆弱又难维护，响应式下极易失效。
正确解法是用 CSS 的scroll-margin-top，让浏览器自己处理偏移：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
scroll-margin-top: 60px（值等于 header 高度） - 响应式场景用
scroll-margin-top: clamp(40px, 6vh, 80px)，比 JS 监听 resize 更稳 - 注意：这个属性只对
scrollIntoView()和原生锚点跳转生效，对scrollTo()无效 - 如果容器本身有
padding或border，scroll-margin从 content box 起算，不用额外补偿
滚动后位置丢失，刷新就回到顶部
浏览器只记住document.documentElement.scrollTop，子容器的scrollTop完全不保存。这不是 bug，是规范行为。指望 CSS 或框架自动续上，只会白忙活。
必须手动存取，且时机很关键：
- 存值时机：监听容器
scroll事件，用localStorage.setItem('chat-scroll-top', container.scrollTop)，键名带容器 ID（如chat-history-scroll-top） - 恢复时机：组件挂载后（Vue
onMounted/ ReactuseEffect），立即赋值container.scrollTop = savedValue - 若容器高度动态变化（如图片加载中），先设
scrollTop，再用requestAnimationFrame延一帧再确认是否生效，否则布局重排会覆盖
移动端局部滚动“点得中、滑不动”
iOS 和 Android WebView 对局部滚动有特殊要求，漏掉任一条件都会导致 touch 事件坐标偏移或惯性滑动失效。
-
<meta name="viewport">必须同时含width=device-width和initial-scale=1.0，缺一不可 - 滚动容器必须加
-webkit-overflow-scrolling: touch（虽已 deprecated，但仍是 2026 年唯一可靠方案） - 该样式只对
position: relative/absolute/fixed容器生效，static下可能被忽略 - iOS Safari 完全不支持
::-webkit-scrollbar，别费劲写隐藏滚动条 CSS；Android 可用::-webkit-scrollbar { display: none; }
最常被忽略的是 viewport 标签位置——它必须在所有 <link> 和 <script> 之前，否则部分 Android WebView 会先闪一次默认渲染，滚动初始化失败。
