Vue3中 KeepAlive 组件不保存滚动高度解决方案

项目场景：

移动端列表跳转到详情，再返回时保留原来位置

---

问题描述

KeepAlive组件不能保存滚动的高度，用户体验不友好，看了网上那么多方案都太复杂了

---

解决方案：

写一个class类，页面离开时保存当前滚动高度，返回时给滚动元素赋值保存的滚动高度

/** ScrollSave.ts */
import { nextTick, onActivated } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';

class ScrollSave {
  private scrollTop: number;
  private selector: string;

  constructor(selector: string) {
    this.scrollTop = 0;
    this.selector = selector;

    onActivated(() => {
      nextTick(() => {
        const dom = document.querySelector(this.selector) as Element;
        if (dom) {
          dom.scrollTop = this.scrollTop;
        }
      });
    });

    onBeforeRouteLeave(() => {
      const dom = document.querySelector(this.selector);
      this.scrollTop = dom ? dom.scrollTop : 0;
    });
  }
}

export default ScrollSave;

 具体使用方法：

/** 使用 */

<script lang="ts" setup>
// 具体的路径看自己存放位置
import ScrollSave from '@/utils/ScrollSave';

onMounted(() => {
  new ScrollSave('.content')
})
</script>
<template>
  <!-- 需要滚动的盒子 -->
  <div class="content">
    <!-- 其他内容 -->
  </div>
</template>