Vue 3 Script Setup中使用scrollIntoView点击滚动元素报错：Uncaught TypeError: element.scrollIntoView is not a function 问题排查

架构老林

2026-4-27

解决Vue3中scrollIntoView报错：Uncaught TypeError: element.scrollIntoView is not a function

你这个报错的核心原因很明确——你没正确获取到模板里的DOM元素！

看你的代码，在goTo函数里用ref(refName)创建了一个新的响应式变量，但这和模板中ref="test"对应的DOM元素完全不是一回事。Vue3里要获取模板中的ref元素，得按正确的规则来：

方案1：针对单个固定元素的场景

如果只是滚动到固定的test元素，直接在setup里声明同名的ref变量即可：

<script setup>
import { ref } from 'vue'
// 声明和模板ref同名的变量，Vue会自动把DOM元素挂载到这里
const test = ref(null)

function goTo(){
  // 注意：ref变量要通过.value访问DOM元素
  test.value.scrollIntoView({behavior: "smooth"})
}
</script>

你的点击组件和目标元素不用改，保持原样就行：

<DayWithText v-for="day in daysOfWeek" :name="day.shortHand" :day="day.day" :date="day.date" @click.prevent="goTo()"/>
<p ref="test">test</p>

方案2：动态传递ref名称的场景（比如多个滚动目标）

如果你的需求是点击不同组件滚动到不同元素，需要动态获取ref，那可以借助getCurrentInstance访问组件实例的$refs：

<script setup>
import { getCurrentInstance } from 'vue'
// 获取组件实例的代理对象
const { proxy } = getCurrentInstance()

function goTo(refName){
  // 通过ref名称从$refs里取对应的DOM元素
  const element = proxy.$refs[refName]
  // 加个判断，避免元素不存在时报错
  if(element){
    element.scrollIntoView({behavior: "smooth"})
  }
}
</script>

这种情况下你的点击事件和目标元素就不用改，还是传'test'就行。