vue中关于滚动条的那点事

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的元素
• 设置监听属性

小编不才，如有言语不当或表述不清，勿喷，

如言语有误，望路过大神指点，不胜感谢！！！