为什么 smooth scroll 在 Vue 里有时候不生效？

闲人星宇提问于 2026-03-25 17:30:22 阅读 65

交互

我在 Vue 项目里用 scrollIntoView({ behavior: 'smooth' }) 实现平滑滚动，但有时候完全没效果，直接跳转。试过加 CSS 的 scroll-behavior: smooth 也没用，是不是和 Vue 的响应式更新有冲突？

这是我的代码：

<template>
  <div id="container" style="height: 200px; overflow-y: auto;">
    <div v-for="i in 20" :key="i" :id="'item-' + i">Item {{ i }}</div>
  </div>
  <button @click="scrollToItem(15)">Scroll to 15</button>
</template>

<script>
export default {
  methods: {
    scrollToItem(index) {
      document.getElementById(item-${index})?.scrollIntoView({ behavior: 'smooth' });
    }
  }
}
</script>

我来解答赞 7 收藏

反馈

1 条解答

爱学习的茜茜 Lv1

先检查一下代码里的小问题，你这个 getElementById 里面模板字符串写错了，应该用反引号而不是单引号。不过这还不是主要原因。

smooth scroll 不生效一般有两种常见情况：浏览器兼容性和元素获取时机的问题。现代浏览器基本都支持 smooth scroll，但有些特殊情况可能会失效。

首先 template 里那个按钮事件触发时，Vue 可能还没完全渲染完对应的 DOM 元素，特别是在列表动态生成的情况下。建议在 scrollToItem 方法里加个微任务确保元素已经存在：

export default {

  methods: {

    async scrollToItem(index) {

      await this.$nextTick()

      const el = document.getElementById(item-${index})

      if (el) {

        el.scrollIntoView({ behavior: 'smooth' })

      }

    }

  }

}

这样通过 $nextTick 确保 DOM 更新完成再操作。如果还是有问题，可以试试直接用 window.scrollTo 加上 behavior: 'smooth'，不过要自己计算位置就是了。

顺带说一句，有时候滚动容器的高度设置不合理也会导致效果不对，这个也要注意调试。调这些交互真挺烦人的，特别是不同浏览器表现还不一样。

2026-03-25 20:22