Vuejs滚动高度返回0

Vue.js 中滚动高度返回 0 的情况通常发生在组件销毁或者页面刷新时。这是因为当组件被销毁时，与其相关的 DOM 元素也会被移除，从而导致滚动高度重置为 0。

基础概念

在 Vue.js 中，组件的生命周期钩子函数允许我们在组件的不同阶段执行代码。当组件被销毁时，会触发 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）钩子。

应用场景

这种情况常见于单页应用（SPA）中，当用户导航到不同的页面时，当前页面的组件会被销毁，滚动位置也会丢失。

解决方案

为了保存滚动位置并在组件重新挂载时恢复它，可以采取以下几种方法：

方法一：使用本地存储

可以在组件销毁前将滚动位置保存到 localStorage 或 sessionStorage 中，然后在组件挂载时读取并设置滚动位置。

export default {
  mounted() {
    window.scrollTo(0, parseInt(localStorage.getItem('scrollPosition')) || 0);
  },
  beforeUnmount() {
    localStorage.setItem('scrollPosition', window.scrollY);
  }
}

方法二：使用 Vue Router 的导航守卫

如果你使用的是 Vue Router，可以利用导航守卫来保存和恢复滚动位置。

const router = createRouter({
  // ...其他路由配置
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }
});

方法三：监听路由变化

可以在组件内监听路由变化，手动保存和恢复滚动位置。

export default {
  watch: {
    $route(to, from) {
      if (to.hash) {
        const element = document.getElementById(to.hash.replace('#', ''));
        if (element) {
          element.scrollIntoView();
        }
      }
    }
  }
}

注意事项

• 在使用本地存储时，需要注意存储空间的限制，并且要考虑到隐私问题。
• 使用 Vue Router 的 scrollBehavior 方法时，要注意它只在支持 history.pushState 的浏览器中有效。
• 在处理滚动位置时，要考虑到页面可能有异步加载的内容，这可能会影响到滚动位置的准确性。

以上方法可以帮助你在 Vue.js 应用中保持用户的滚动位置，提升用户体验。