请教一下各位关于滚动条回滚的问题

Question

        使用vue制作一个单页面应用，这里有个需求就是返回上一级页面的时候，滚动条滚动到之前浏览到的位置。

具体就是三个页面，页面之间使用路由切换，

        首页—>子频道页面—>详情页

         这样的顺序，但是由于我是在子元素比如class="xx-scroll" 上使用overflow:auto,来使子元素进行滚动，所以浏览器自动回滚不起作用了，我就使用keep-alive缓存上一级页面，然后自己设置回滚

         首页，子频道页默认缓存，keepAlive:true ,详情页默认不缓存

         具体就是在路由的meta信息里设置一个scrollTop,然后页面跳转是触发一个方法

         首先记录下当前元素的scrollTop值，设置一个ref把当前元素保存下来

         然后才使用$route.push跳转。

         再使用watch监听$route

    watch:{
      $route(to,from){if(to.name=='index'){this.$ref.ref.scrollTop=tthis.$route.meta.scrollTop}}
    }

         这里我发现一个问题，当第一次进入首页，如果首页和子页面的都是缓存状态，

         那么 子页面->首页 的滚动条回滚就不会生效，我查看了一下

         

     watch:{
      $route(to,from){
      if(to.name=='index'){
      this.$ref.ref.scrollTop=this.$route.meta.scrollTop
      console.log('1'+this.$route.meta.scrollTop)
      console.log('2'+this.$ref.ref.scrollTop)
      }
      }
    }

            结果打印出来1的值是正确的值，而2的值是0

            我就猜是不是其实赋值是成功的，但是后面有个事件把这个元素的scrollTop值又改为0了

            所以我就使用setTimeout让

            

      this.$ref.ref.scrollTop=this.$route.meta.scrollTop

            这个语句过1s后执行，结果没问题

            我想请问一下，设置scrollTop值以后发生了什么事件导致它的值又归0了,我怎么才能知道发生了什么呢

Answer 1

    我知道了，由于那时候页面还没有渲染完，导致元素scrollTop值没有生效就是0，但是我想知道为什么前往的页面没有缓存就可以正常的设置，如果是默认缓存的就不行呢