保存滚动位置的实现方法

---

前言

有的时候从列表页面进入详情页面再返回列表页面，即使使用了keep-alive缓存列表页，也会导致列表页面你的滚动位置发生了变化。

这是由于两点问题造成的：

1. 两个页面高度不一致导致页面跳转的时候滚动条位置发生了改变；
2. keep-alive不会缓存滚动条的位置。

为了解决这个问题我们需要手动的保存列表页面的滚动条位置，并再切换回列表页面的时候滚动到保存的位置。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、让路由保存滚动条的位置

{
	name: 'home',
	component: () => import('@/views/home/index.vue'),
	meta: {
		title: '首页',
		keepAlive: true,
		scrollTop: 0,
	},
},
1
2
3
4
5
6
7
8
9

二、创建方法监听滚动事件

methods: {
	// 记录滚动距离
	scrollEvent() {
		this.$route.meta.scrollTop =
			document.documentElement.scrollTop || document.body.scrollTop
	},
},
1
2
3
4
5
6
7

三、页面进入活跃打开监听并滚动到记录位置

activated() {
	// 开启对于滚动事件的监听，需要要创建一个方法，以便销毁
	window.addEventListener('scroll', this.scrollEvent)
	// 页面进入活跃的时候滚动到保存的位置
	document.documentElement.scrollTop = this.$route.meta.scrollTop
	document.body.scrollTop = this.$route.meta.scrollTop
},
1
2
3
4
5
6
7

四、完善并优化

beforeRouteLeave(to, from, next) {
	// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
	window.removeEventListener('scroll', this.scrollEvent)
	next()
},
activated() {
	// 开启对于滚动事件的监听，需要要创建一个方法，以便销毁
	window.addEventListener('scroll', this.scrollEvent)
	// 页面进入活跃的时候滚动到保存的位置
	document.documentElement.scrollTop = this.$route.meta.scrollTop
	document.body.scrollTop = this.$route.meta.scrollTop
},
methods: {
	// 记录滚动距离
	scrollEvent() {
		this.$route.meta.scrollTop =
			document.documentElement.scrollTop || document.body.scrollTop
	},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

PS：也可以在离开页面的时候保存滚动条的位置，但是博主在使用过程中发生过离开页面不记录的情况，所以使用了监听事件