Vue2搭配Vuetify时如何点击按钮将textarea滚动至内容顶部

代码不生效有两个核心问题：

• this.$refs.atend获取到的是Vuetify封装的v-textarea组件实例，不是浏览器原生textarea DOM元素，直接在组件实例上设置scrollTop不会作用到真实的滚动容器上。
• 执行顺序错误：原生textarea执行focus()时，浏览器会默认把光标所在位置滚动到可视区域，你先设置scrollTop=0再聚焦，设置的滚动位置会被聚焦触发的默认滚动行为覆盖。

v-textarea组件实例的$refs.input属性指向内部真实的原生textarea DOM，操作这个DOM的滚动属性才会生效；同时调整执行顺序，等聚焦触发的DOM更新完成后再设置滚动位置，避免设置被覆盖。

修正后的方法代码：

testScroll() {
  // 拿到原生textarea DOM
  const nativeTextarea = this.$refs.atend.$refs.input
  // 先触发聚焦
  nativeTextarea.focus()
  // 等DOM更新完成后设置滚动到顶部
  this.$nextTick(() => {
    nativeTextarea.scrollTop = 0
  })
}

如果当前使用的Vuetify版本无法通过$refs.input拿到原生元素，可以通过DOM选择器从组件根节点查找原生textarea，兼容性更好：

testScroll() {
  const nativeTextarea = this.$refs.atend.$el.querySelector('textarea')
  nativeTextarea.focus()
  this.$nextTick(() => {
    nativeTextarea.scrollTop = 0
  })
}

内容的提问来源于stack exchange，提问作者Luiz Alves