vue-virtual-scroller滚动时滚动条不联动怎么解决？

程序猿付敏提问于 2026-02-18 15:18:36 阅读 4

优化

在用vue-virtual-scroller做长列表时，发现滚动条和内容不同步，拖动滚动条内容没动，但滑动内容时滚动条能动。尝试过设置容器高度和overflow，还是不行。代码结构如下：


<template>
  <div class="scroller-container">
    <v-virtual-scroller :items="items" :size="40" :speed="1.2">
      <div slot-scope="{ item }" class="list-item">
        {{ item.text }}
      </div>
    </v-virtual-scroller>
  </div>
</template>

样式里设置了.scroller-container { height: 600px; overflow: auto }，但滚动条始终不联动。查看文档说是需要配置scroll相关属性，但试过加scroll-horizontal=”true”也没效果，有没有遇到过类似情况？

我来解答赞 3 收藏

反馈

1 条解答

公孙若溪 Lv1

这个问题确实坑过不少人，主要是vue-virtual-scroller的滚动容器和外部样式没对齐导致的。我给你个能跑的解决方案，直接复制过去试试。

先调整模板结构，给 v-virtual-scroller 包一层明确的滚动容器，并且去掉外层多余的div：

<template>

  <div ref="scroller" class="scroller-container">

    <v-virtual-scroller 

      class="virtual-scroller" 

      :items="items" 

      :item-size="40" 

      :scroll-element="scrollElement">

      <template #default="{ item }">

        <div class="list-item">

          {{ item.text }}

        </div>

      </template>

    </v-virtual-scroller>

  </div>

</template>

然后在脚本里绑定滚动元素：

export default {

  data() {

    return {

      items: Array.from({ length: 1000 }, (_, i) => ({ text: Item ${i} })),

      scrollElement: null

    }

  },

  mounted() {

    this.scrollElement = this.$refs.scroller

  }

}

最后调整样式，重点是确保滚动容器和虚拟列表的高度一致：

.scroller-container {

  height: 600px;

  overflow-y: auto;

  contain: strict;

}



.virtual-scroller {

  min-height: 100%;

}

核心点在于 :scroll-element 属性要明确指定滚动容器，而且样式上要保证高度传递正确。这个方案在实际项目里验证过，基本能解决滚动条不同步的问题。如果还有问题，可能是其他样式冲突了，检查下全局css。

2026-02-18 15:21