滚动行为缓存之前的位置

本文主要是介绍滚动行为缓存之前的位置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

开发中的问题：
场景1 在用前端路由，当切换到新路由时，想要页面滚动到顶部，或者保持原先滚动位置，就像重新加载页面那样。
场景2 在一个很长的列表页往下拉，然后点击列表中的某一数据进入到详情页查看。此时决定返回列表也继续查看列表。很多情况下，由于列表页的组件已经被销毁，所以我们返回到列表页面会置顶，不得不重新下拉查看列表，这样就做了很多没有必要的操作，也是不符合用户的预期。

滚动行为
通过vue-router自定义路由切换时页面如何滚动。当跳转新路由时，页面滚动到某个位置；切换路由时页面回到之前的位置。

// srcollBehavior 方法
const router = createRouter({history: createWebHashHistory(), // createWebHistory 是 Vue Router 提供的一种基于浏览器 history API 的路由模式routes:[...],srcollBehavior(to, from, savedPositon){// return 期望滚动到哪个的位置}
})

srcollBehavior 方法接收 to 和 from路由对象，第三个参数savedPositon 当且仅当 popstate导航（通过浏览器前进/后退按钮触发）时才可用。
return{ x:number, y:number} // 来控制页面滚动的位置
对于所有路由导航，简单地让页面滚动到顶部。

srcollBehavior (to, from, savedPositon ){return {x:0,y:0}
}
// 或
const router = createRouter({scrollBehavior(to, from, savedPosition) {// 始终滚动到顶部return { top: 0 }},
})

新增异步滚动：
当页面数据需要请求加载延迟的情况下，页面如果直接滚动，会出现滚动后，页面数据请求回来，DOM重新渲染，滚动失效。

scrollBehavior(to, from, savedPosition){return new Promise((resolve,reject)=>{setTimeour(()=>{resolve({x:0,y:0})},500)})
}

滚动到元素位置
可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，top 和 left 将被视为该元素的相对偏移量。

const router = createRouter({scrollBehavior(to, from, savedPosition) {// 始终在元素 #main 上方滚动 10pxreturn {// el: document.getElementById('main'),el: '#main',top: -10,}},
})

滚动到锚点位置

const router = createRouter({scrollBehavior(to, from, savedPosition) {if (to.hash) {return {el: to.hash,}}},
})

滚动到之前的位置
在按下浏览器后退/前进按钮，或者调用 router.go() 方法时，页面会回到之前的滚动位置：

const router = createRouter({scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { top: 0, behavior: 'smooth' }}},
})
// 如果返回一个false的值，或者是一个空对象，则不会发生滚动。我们还可以在返回的对象添加behavior：‘smooth’，让滚动更加丝滑。

scrollIntoView()
如果想要在特定的按钮点击事件中实现平滑滚动可以使用 scrollIntoView 方法。scrollIntoView()将调用它的元素滚动给到浏览器窗口的可见区域顶部。

element.scrollIntoView（）; // 等同于 element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器
element.scrollIntoView（scrollIntoViewOptions）; //对象参数
参数：
alignToTop：true时，相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}； false时，相当于{behavior: ‘auto’, block: ‘end’, inline: ‘nearest’}；未传入参数时，默认值为：{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}
scrollIntoViewOptions：一个包含下列属性的对象。

使用缓存，即不销毁列表页

// APP.js中
<template><div id="app"><!-- <router-view/> --><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive" /></div>
</template>

// router.js中routes: [{path: '/',name: 'List',//component: Listcomponent: () => import('./views/index/list.vue'),meta: {keepAlive: true // 需要缓存}},{path: '/content/:contentId',name: 'content',component: () => import('./views/index/content.vue'),meta: {keepAlive: false // 不需要缓存}},
]

使用路由守卫
原理就是在beforeRouterLeave的路由钩子记录当前页面滚动位置。

//在页面离开时记录滚动位置,这里的this.scrollTop可以保存在vuex的state或者浏览器本地
beforeRouteLeave (to, from, next) {this.scrollTop = document.documentElement.scrollTop || document.body.scrollTopnext()},//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {next(vm => {document.body.scrollTop = vm.scrollTop})},