vue中關於滾動條的那點事
不知道你有沒有遇到過這種情況，有時當頁面切換時，滾動條不在頁面的頂端。最近半路加入一個項目，就遇到這種情況。(若只是為了解決此問題，可直接翻到最下方)下面談談解決此問題的過程：
什么情況下會出現滾動條的緩存？
之前想要滾動條在頁面跳轉時被緩存，需要自己設定keep-alive，
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
並且需要在路由中設定meta屬性
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要緩存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被緩存
}
}
]
})
在router的生命周期的鈎子函數中獲取當前滾動條位置，並將其存儲起來
beforeRouteLeave(){
...//獲取滾動條位置，並將其存儲
}
在進入路由之前獲取存儲位置
beforeRouteEnter(){
...//獲取滾動條位置，並將其賦值
document.body.scrollTop = ...
}
但是在我的這個項目中並沒有設置keep-alive。然后就找了度娘，度娘中的小伙伴給出了解決方案，就是在vue官方文檔中vue-router中的 滾動行為，
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
對於所有路由導航，簡單地讓頁面滾動到頂部。
返回 savedPosition，在按下 后退/前進 按鈕時，就會像瀏覽器的原生表現那樣：
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
如果你要模擬“滾動到錨點”的行為：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
但是文檔中明確表示，這個功能只在支持 history.pushState 的瀏覽器中可用。還有一個但是，也是vue官方文檔的原話:vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。
也就是說，不能拿來就用。
這可如何是好？？？
（此處省略一萬字。。。）
接下來就是此次的重點了。。。。
在嘗盡各種能想到的辦法之后，就忽然想到一個簡單粗暴的解決方案，直接代碼：
watch: {
'$route' (to,from){
document.querySelector('.main').scrollTop = 0 //.main是本項目中overFlow：auto的盒子
}
}
在寫有
總結一下：
- 首先要看一下是否有寫keep-alive
- 找出設置overFlow：auto的元素
- 設置監聽屬性
小編不才，如有言語不當或表述不清，勿噴，
如言語有誤，望路過大神指點，不勝感謝！！！