局部滚动容器刷新后滚动位置丢失是因dom重建导致状态清零，需在内容替换前保存scrolltop、渲染完成后用requestanimationframe恢复；直接赋值无效因布局未完成，须确保可滚动且样式生效；动态列表应补偿高度变化，ios safari宜用scrollintoview替代scrolltop。
局部滚动容器刷新后滚动位置丢失
局部滚动容器（比如 div 设置了 overflow-y: auto）在内容被 JS 替换（如 innerHTML = newHtml 或 replaceChildren()）后，scrollTop 会重置为 0。这不是浏览器 bug，而是 DOM 重建导致状态清零的自然行为。
关键不是“阻止重置”，而是“重置后立刻恢复”。必须在新内容插入完成、布局计算完毕后再读取并设置 scrollTop，否则会被浏览器覆盖或无效。
- 保存时机：在替换前，用
container.scrollTop记录当前值，存入变量或sessionStorage（若需跨操作持久） - 还原时机：必须等新 DOM 渲染完成，推荐用
requestAnimationFrame(() => { container.scrollTop = savedPos; }) - 注意：不要用
setTimeout(() => {}, 0)，它不保证 layout 已完成；requestAnimationFrame才是正确钩子
为什么直接赋值 scrollTop 有时无效
对一个刚插入的 div 立即设置 scrollTop，常发现没反应——因为此时元素还没完成首次 layout，高度为 0 或未触发可滚动状态。
典型错误写法：container.innerHTML = html; container.scrollTop = 100;。这时 container.scrollHeight 可能仍等于 clientHeight，导致赋值被忽略。
- 验证是否可滚动：检查
container.scrollHeight > container.clientHeight，否则scrollTop无意义 - 确保样式已生效：容器必须有明确的
height或max-height，且overflow-y不为visible - 避免在
display: none父元素中操作，隐藏状态下无法获取真实尺寸
滚动位置跳动：列表项高度不固定时的补偿策略
当局部滚动区是动态列表（如评论流），插入新项后，原有项的 offsetTop 会因后续项高度变化而偏移，导致用户看到“内容上蹿”或“视口突然下拉”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
核心思路不是锁住 scrollTop，而是锁定用户视线相对于最后一项的位置。
- 加载前记录：
const lastItem = container.lastElementChild; const lastTop = lastItem?.offsetTop || 0; - 插入后计算新增总高度：
const newLastItem = container.lastElementChild; const delta = newLastItem?.offsetTop - lastTop; - 用
container.scrollBy(0, delta)补偿，比直接设scrollTop更稳定 - 更稳妥：所有列表项加
min-height或统一骨架高度，让浏览器能预估布局变化
移动端 Safari 中 scrollTop 恢复失败
iOS Safari 对局部滚动容器的 scrollTop 设置有延迟生效问题，尤其在快速连续更新时，容易出现“设了但没动”或“动一半停住”。
这不是兼容性缺失，而是 WebKit 的渲染调度机制导致。绕过方式不是降级，而是改用更底层的控制。
- 改用
scrollIntoView()：对目标项调用item.scrollIntoView({ block: 'start', inline: 'nearest' })，WebKit 对此支持更稳 - 避免高频写
scrollTop：合并多次更新，用一次replaceChildren()+ 一次恢复，而不是逐条append() - 强制重排前清空：插入前先
container.scrollTop = 0，再插入，再恢复，可减少 WebKit 的状态混淆
真正难的不是记住位置，而是判断什么时候该恢复、恢复成什么值——尤其是当容器高度由内容撑开、又受父级 flex/gird 约束时，scrollTop 和 scrollHeight 的关系会随布局阶段反复变化。务必在 requestAnimationFrame 回调里做最终校验，别信“插入完就 OK”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
