vue项目 设置scrollTop不起作用（解决方法及原因）

1、场景恢复

activated() {

this.$refs.viewBox.scrollTop = 100

console.log(this.$refs.viewBox.scrollTop)

}

控制台显示

0

2、解决办法

activated() {

this.$nextTick(() => {

this.$refs.viewBox.scrollTop = 100

})

console.log(this.$refs.viewBox.scrollTop)

}

控制台显示

100

3、原因

先考虑一个核心问题，activated究竟是在vue生命周期的哪个节点执行呢？

我们知道，要想使用activated，必须设置keep-alive（缓存组件，自身不会渲染dom元素）。当 keepAlive为 true时，keep-alive包裹的动态组件会被缓存。

当你的组件在 keep-alive内被切换，组件里的 activated 函数就会执行。也就是说，activated 方法执行的时候，并不会考虑你组件里的dom是否已渲染（大概率是没有渲染，毕竟组件一切换activated 就开始执行，页面的dom渲染根本来不及），dom都还没渲染，this.$refs.viewBox.scrollTop这种给dom赋值的代码肯定是赋值不上的。

再说一下

this.$nextTick() 方法，$nextTick 是在下次 DOM 更新结束之后执行延迟回调，意思很简单，就是等待dom刷新出来之后再执行的函数。简直就是activated里给dom赋值时的御用函数有没有。