如何用JavaScript在网格重载后保留垂直滚动条位置？

• 先保存滚动位置：在执行this.grid.empty();清空网格之前，先获取当前网格容器的垂直滚动位置，存在临时变量里就行（单页面内操作没必要用localStorage/sessionStorage，反而容易因为时机问题失效）。

  // 拿到网格容器当前的滚动条位置
  const savedScrollTop = this.grid.scrollTop;
  

• 执行清空与重新加载：按原有逻辑清空网格并重新渲染内容

  this.grid.empty();
  // 这里写你的网格重新加载代码，比如渲染新的列表项
  this.renderGridItems();
  

• 恢复滚动位置：必须等网格内容完全渲染完成后再设置滚动条，否则DOM还没更新，设置的位置不会生效。如果是同步渲染，用setTimeout确保DOM更新完成；如果是异步加载数据，就在数据返回并渲染后执行：

  // 同步渲染场景：用setTimeout等待DOM更新
  setTimeout(() => {
    this.grid.scrollTop = savedScrollTop;
  }, 0);
  
  // 异步加载场景：在数据渲染完成后设置
  this.fetchGridData().then(data => {
    this.renderGridItems(data);
    this.grid.scrollTop = savedScrollTop;
  });
  

• 为什么localStorage/sessionStorage没生效？
  核心问题是恢复时机不对：如果在网格内容还没重新渲染时就设置scrollTop，此时容器的内容高度还没恢复到之前的状态，设置的滚动值不会起作用。而且单页面内的临时状态用内存变量比持久化存储更高效。

内容的提问来源于stack exchange，提问作者Rajesh