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

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

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