使用display CSS隐藏并重新加载div时保持屏幕滚动位置

嗨，这个问题我之前也遇到过！当我们只保存了标签的激活状态，却没同步记录滚动位置时，就会出现这种 reload 后标签状态对了但滚动条回到顶部的情况。下面给你几个实用的解决方案，你可以根据自己的项目情况选：

方案一：用localStorage同时存标签状态和滚动位置 #

这是最直接的方案，把需要的状态都存在本地存储里：

1. 切换标签时记录状态：
   在你处理标签切换的函数里，加上保存滚动位置的代码：

   function switchActiveTab(tabId) {
     // 先存当前滚动条位置
     localStorage.setItem('pageScrollTop', window.scrollY);
     // 再存当前激活的标签ID
     localStorage.setItem('activeTabId', tabId);
   
     // 这里放你原本的标签切换逻辑（隐藏/显示对应div）
     // ...
   }
   

2. 页面加载时恢复状态：
   页面加载完成后，先恢复标签状态，再恢复滚动位置——一定要注意顺序，因为不同标签对应的div高度可能不一样，先显示正确的div再滚动才准确：

   window.addEventListener('load', () => {
     const savedTab = localStorage.getItem('activeTabId');
     if (savedTab) {
       // 执行你的标签恢复逻辑，比如激活对应标签、显示对应div
       // ...
     }
   
     // 恢复滚动位置
     const savedScroll = localStorage.getItem('pageScrollTop');
     if (savedScroll) {
       window.scrollTo(0, parseInt(savedScroll));
     }
   });
   

   如果你页面里的div内容是动态加载的（比如从接口取数据），记得要等内容完全渲染后再执行滚动恢复，不然页面高度还没更新，滚动位置会不准。

方案二：用sessionStorage替代localStorage（临时会话保留） #

如果不需要长期保存用户的标签和滚动状态，只是希望在当前浏览器会话内有效（关闭窗口就清空），那把上面代码里的localStorage换成sessionStorage就行，逻辑完全一致，只是存储的生命周期不同。

方案三：利用浏览器history.state（无本地存储的优雅方案） #

这个方案不需要依赖本地存储，而是把状态存在浏览器的历史记录里，后退/前进操作也能同步状态和滚动位置：

1. 切换标签时更新历史状态：

   function switchActiveTab(tabId) {
     const currentScroll = window.scrollY;
     // 替换当前历史状态，存入标签和滚动信息
     history.replaceState(
       { activeTab: tabId, scrollTop: currentScroll },
       document.title
     );
   
     // 你的标签切换逻辑
     // ...
   }
   

2. 页面加载时读取历史状态：

   window.addEventListener('load', () => {
     if (history.state) {
       const { activeTab, scrollTop } = history.state;
       if (activeTab) {
         // 恢复标签状态
         // ...
       }
       if (scrollTop !== undefined) {
         window.scrollTo(0, scrollTop);
       }
     }
   });
   

额外小提示 #

• 如果你的标签切换是通过URL哈希（比如#tab-1）实现的，可以把滚动位置也加到哈希参数里，比如#tab-1&scroll=600，然后页面加载时解析哈希来恢复状态。
• 测试时如果遇到滚动位置不准确的情况，可能是页面CSS渲染延迟导致的，可以试试把滚动恢复的代码放在setTimeout里延迟100ms左右，或者监听DOMContentLoaded事件（比load事件更早触发，但要确保DOM已经完全解析）。

内容的提问来源于stack exchange，提问作者A.Tari