Vue.js中重新显示滚动容器后如何维持其滚动位置？

方案一：手动保存与恢复滚动位置 #

这种方式无需依赖组件缓存，适合不需要保留组件其他状态的场景，步骤清晰可控：

1. 在父组件中维护滚动位置变量
   在父组件的data中添加变量存储滚动位置：

   data() {
     return {
       showFeed: true,
       showPostDetails: false,
       feedScrollTop: 0
     }
   }
   

2. 监听滚动事件保存位置
   给滚动容器添加滚动监听，实时更新滚动位置（也可在切换到详情页前一次性获取）：

   <!-- 父组件模板中的滚动容器 -->
   <div 
     class="scroll-container" 
     ref="feedScroll"
     @scroll="saveScrollPosition"
     v-if="showFeed"
   >
     <!-- 帖子列表内容 -->
   </div>
   

   对应的方法：

   methods: {
     saveScrollPosition() {
       this.feedScrollTop = this.$refs.feedScroll.scrollTop;
     },
     openPostDetail() {
       // 若不需要实时监听，也可在这里一次性获取滚动位置
       // this.feedScrollTop = this.$refs.feedScroll.scrollTop;
       this.showFeed = false;
       this.showPostDetails = true;
     }
   }
   

3. 切换回Feed时恢复滚动位置
   监听showFeed的变化，利用$nextTick确保容器渲染完成后再设置滚动位置：

   watch: {
     showFeed(newVal) {
       if (newVal) {
         this.$nextTick(() => {
           this.$refs.feedScroll.scrollTop = this.feedScrollTop;
         });
       }
     }
   }
   

方案二：使用keep-alive缓存组件 #

keep-alive会保留组件实例，滚动位置和组件内部状态都会被自动保存，适合需要保留组件状态的场景：

1. 用keep-alive包裹Feed组件
   在父组件模板中，将Feed组件放在keep-alive标签内：

   <keep-alive>
     <feed-component v-if="showFeed" />
   </keep-alive>
   <post-details-component v-if="showPostDetails" />
   

   注意：Feed组件需要设置name属性（比如name: 'FeedComponent'），keep-alive才能正确识别缓存目标；也可通过include属性指定要缓存的组件：

   <keep-alive include="FeedComponent">
     <feed-component v-if="showFeed" />
   </keep-alive>
   

2. 处理组件激活时的状态更新
   缓存的组件再次激活时不会重新执行created或mounted钩子，若需更新帖子列表，要在activated钩子中处理：

   // Feed组件内部
   export default {
     name: 'FeedComponent',
     activated() {
       // 在这里重新获取最新帖子数据或更新列表
       this.loadPosts();
     }
   }
   

两种方案对比 #

• 手动保存：灵活度高，不占用缓存资源，适合只需要保留滚动位置、不需要缓存组件其他状态的场景；但需要手动处理滚动监听和位置恢复。
• keep-alive：自动保留滚动位置和组件状态，代码更简洁；但要注意缓存带来的状态过期问题，必须在activated钩子中处理数据更新。

你之前用的定位到点击帖子的方法，在列表有动态更新（比如新增帖子、排序变化）时容易出现定位偏差，上面两种方案能更稳定地维持滚动位置。

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