局部滚动容器默认 scrolltop 初始为 0，但仅限首次渲染；若 dom 加载前被 js 修改、ssr 水合误读缓存或父组件重建元素，可能继承旧值，需在渲染完成且尺寸计算完毕后用 requestanimationframe 设置 scrolltop = 0。
局部滚动容器默认不滚动到顶部？检查 scrollTop 是否被重置
很多开发者以为给 div 加了 overflow-y: auto，它就会“自然”从顶部开始显示内容——但实际中，刷新或路由切换后，容器常卡在上次滚动位置，甚至初始就偏移。这不是 bug，而是浏览器对可滚动元素的 scrollTop 值不做重置（不像 window.scrollY 在导航时可能被 history API 影响）。
关键点：局部滚动容器没有“自动归零”逻辑，它的初始 scrollTop 是 0，但仅限首次渲染；若 DOM 加载前已有 JS 修改过该值（比如 SSR 渲染后 hydrate 阶段误读缓存），或父组件状态导致元素重建，就可能继承旧值。
- 在
DOMContentLoaded后立即设container.scrollTop = 0，但需确保容器已挂载且尺寸计算完成（避免设了 0 又被 layout 触发重排覆盖） - 更稳妥的做法是用
requestAnimationFrame包一层：requestAnimationFrame(() => { container.scrollTop = 0; }); - 如果容器是动态插入（如模态框打开时才创建），应在插入 DOM 后、首次渲染完成时设置，而不是在
appendChild后立刻赋值
Vue/React 中局部滚动初始位置失效？别依赖 mounted/useEffect 的时机
在单页应用中，mounted（Vue）或 useEffect（React）看似是“元素就绪”的信号，但它们只保证节点已挂载，不保证样式已生效、滚动高度已计算完毕。尤其当容器内有图片、字体加载、或 CSS transform 干扰时，scrollHeight 和 scrollTop 可能仍为 0 或不准确。
- 不要在
mounted里直接写el.scrollTop = 0，改用nextTick（Vue 2）或onMounted(() => nextTick(() => el.scrollTop = 0))（Vue 3） - React 中避免只靠
useEffect(() => { ref.current.scrollTop = 0 }, [])，加一层setTimeout或监听resize+load事件兜底 - 若容器高度依赖内容（如
height: fit-content），先设临时固定高（如min-height: 100px），再恢复，防止渲染抖动导致 scrollTop 被忽略
用 CSS scroll-snap-align 强制初始对齐？它不控制初始位置
scroll-snap-align 和 scroll-snap-type 是用来约束“滚动停止点”的，不是初始化工具。即使你给第一个子元素设了 scroll-snap-align: start，容器首次渲染时仍会从 scrollTop = 0 开始——除非 0 恰好是一个 snap point（比如第一个区块高度正好填满视口），否则不会自动吸附。
- 想靠 CSS 控制初始停靠，唯一可靠方式是让容器本身在渲染时就处于目标位置，例如：
<div class="scroll-container" style="scroll-top: 120px;">但注意：这个 <code>style="scroll-top"</code> 是无效的，CSS 没有 <code>scroll-top</code> 属性<li>真正能用的 CSS 方案只有 <code>scroll-margin-top</code> 配合 <code>scrollIntoView</code>，但它面向的是“滚动到某元素”，不是“容器初始滚动位置”</li> <li>结论：CSS 无法替代 JS 设置初始 <code>scrollTop</code>，别试图绕开 JS</li> <h3>localStorage 记录并恢复局部滚动位置？小心跨设备/会话污染</h3> <p>有些场景需要记住用户上次在某个列表里的滚动位置（比如商品筛选页），这时用 <code>localStorage</code> 存 <code>scrollTop</code> 是合理选择。但直接存裸值容易出问题：</p> <ul> <li>键名必须带上下文标识，例如 <code>list-scroll-${productId}</code>，避免多个同类型容器互相覆盖</li> <li>恢复时不能无条件执行 <code>scrollTop = storedValue</code>，要先判断 <code>storedValue ，否则设一个超限值会导致静默失败或跳回 0</code> </li> <li>在页面卸载前保存，但别用 <code>beforeunload</code>（部分浏览器已限制），改用 <code>pagehide</code> 事件：<pre class="brush:php;toolbar:false;">window.addEventListener('pagehide', () => localStorage.setItem('my-list-scroll', container.scrollTop)); - 移动端 WebView 中，
localStorage可能异步写入，建议加setTimeout(() => {}, 0)确保事件队列清空后再读取
最易被忽略的一点：局部滚动容器的 scrollTop 初始值是否为 0，和它的 display 状态强相关。如果容器一开始是 display: none 或在 hidden 的 tab 里，后续设 scrollTop 会无效——得先让它可见（比如 visibility: visible + height: auto），再设值，必要时加一次 offsetHeight 强制触发 layout。
