keep-alive页面切回原滚动位置hook方法

原理

如果使用了keep-alive组件，当前组件会额外增加两个生命周期。
activated：被 keep-alive 缓存的组件激活时调用
deactivated：被 keep-alive 缓存的组件失活时调用。
通过这两个声明周期，失活时记录页面原滚动位置，激活时滚回原位置。

hook

import { ref, onDeactivated, onActivated } from 'vue'

/**
 * 页签切回回到原滚动位置方法
 */
export function useScrollBack() {
  const scrollTop = ref(0);

  onDeactivated(() => {
    // 失活时保存滚动位置
    let scrollBar = document.getElementsByClassName("main-scrollbar") && document.getElementsByClassName("main-scrollbar").length > 0 ? document.getElementsByClassName("main-scrollbar")[0] : null;
    scrollTop.value = scrollBar?.scrollTop || window.pageYOffset || 0;
    // console.log("保存位置" + scrollTop.value)
  })
  onActivated(() => {
    // console.log("恢复位置" + scrollTop.value)
    // 激活时恢复滚动位置 
    let scrollBar = document.getElementsByClassName("main-scrollbar") && document.getElementsByClassName("main-scrollbar").length > 0 ? document.getElementsByClassName("main-scrollbar")[0] : window;
    scrollBar.scrollTo(0, scrollTop.value)
  })
  return { scrollTop }
}

使用

import { useScrollBack } from "@/hooks/scrollBack";
useScrollBack()