vue--记住页面的滚动高度，再次返回该页面时自动滚动到当前高度

淡淡的烟草味﹌ 2022-12-12 15:08 428阅读 0赞

### 1、获取页面滚动高度 ###

> `document.documentElement.scrollTop`

### 2、什么时候获取页面滚动高度 ###

> 路由变化，离开当前页面时，可以在以下3个方法内获取页面滚动高度并记下来

*  `beforeDestroy`
 *  `destroyed`
 *  `beforeRouteLeave`

### 3、保存页面滚动高度 ###

> 经过第一步和第二步已经可以在离开该页面时获取页面滚动高度了，但是由于在此返回该页面时需要再次滚动到当前高度。因此，需要把整个高度给记下来。。。。。。那么记录到哪里呢？

> 我们知道可以在路由信息部分添加一个`savePosition:{x:0,y:0}`，再通过`scrollBehavior`滚动到之前设置的高度上，我们就把它保存到这里

代码如下

beforeRouteLeave(to, from, next) { 
        this.$route.savedPosition = { 
          x: 0,
          y: document.documentElement.scrollTop,
        };
        next();
      },

这里，是在`beforeRouteLeave`里获取页面滚动高度并保存的。

结果。。。。报错了。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 1]  
大致意思是，不能在js中给`this.$route`添加属性，对象是不可扩展的。

。。。。。。好吧，。。。。。不能新增属性，那就在已有属性上进行改动。。。。把它添加到`meta`下

beforeRouteLeave(to, from, next) { 
        this.$route.meta.savedPosition = { 
          x: 0,
          y: document.documentElement.scrollTop,
        };
        next();
      }

router/index.js 中`scrollBehavior`的写法。当要进入`/backtop`页面时，滚动到`savePositon`位置。

scrollBehavior(to, from, savedPosition) { 
        if (savedPosition) { 
          return savedPosition
        } else if (to.path === "/backtop" && to.meta && to.meta.savedPosition) { 
          return to.meta.savedPosition
        } else { 
          return {  x: 0, y: 0 }
        }
      }

测试了下， 从`/backtop`跳转到`/axios`，再从`/axios`跳转到`/index`，最后从`/index`进入`/backtop`仍然可以自动滚动到之前记录的高度。

如果想要 从某个页面进入 `/backtop`时才自动滚动到记录的高度，就对to 和from 做一下判断。。。。

### 4、vuex ###

> 将页面滚动高度记录到vuex中。

> 大致过程和之前的是一样的，就不重复了。。

保存到vuex或者保存到this.$route.meta.savePosition中，当手动刷新该页面后，这个高度丢失。。。。。

这时，若想要在页面刷新后仍然可以自动滚动到之前的高度的话，。。。。就需要下面的方式了。。。。

### 5、sessionStorage localStorage ###

> 将页面滚动高度记录到 `sessionStorage`或者`localStorage`中  
> 优点：即使刷新页面高度也不会丢失  
> 缺点：可能会被用户误删。。。。。。 。。。 需要手动删除。。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c028b1bc303942d585e4b3c277725b89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/aa798b97f4da4ee6a17c8496ff281669.png