vue项目设置scrollTop不起作用(总结)

针对"vue项目设置scrollTop不起作用"这个问题，我们可以总结一下完整的攻略。

首先需要明确的是什么情况下设置scrollTop不起作用，一般情况下包括以下两种情况：

1.设置scrollTop的元素display属性为none时，无法设置scrollTop。

2.设置scrollTop的元素并没有渲染完成，此时设置scrollTop也会无效。

针对这些情况，我们需要分别进行处理。

1.如果是第一种情况，我们需要先将元素的display属性设置为block或者其他可见属性，然后再设置scrollTop。

示例代码：

document.getElementById("xxx").style.display="block";
Vue.nextTick(function () {
    document.getElementById("xxx").scrollTop = 200;
})

2.如果是第二种情况，我们需要等待元素渲染完成后再进行设置。

示例代码：

Vue.nextTick(function () {
    document.getElementById("xxx").scrollTop = 200;
})

顺带一提，如果是在Vue.js框架下进行开发，我们通常使用ref属性来操作元素，而不是使用getElementById获取元素。如果使用ref属性，我们可以方便地在Vue组件的生命周期钩子函数中操作元素。

示例代码：

<template>
   <div ref="container"></div>
</template>

<script>
    export default {
      mounted () {
        this.$nextTick(function () {
          this.$refs.container.scrollTop = 200;
        })
      }
    }
</script>

综上所述，以上就是关于"vue项目设置scrollTop不起作用"的完整攻略。