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

这问题我昨晚刚修完，根本不是滚动条没联动，是你容器没包住虚拟滚动器的内部滚动容器——把 overflow: auto 加到 v-virtual-scroller 自身上，别加外层 div：

<div class="scroller-container">

  <v-virtual-scroller 

    class="virtual-scroll-inner" 

    :items="items" 

    :size="40" 

    :speed="1.2"

  >

    <div slot-scope="{ item }" class="list-item">

      {{ item.text }}

    </div>

  </v-virtual-scroller>

</div>

.scroller-container {

  height: 600px;

  width: 100%;

}



.virtual-scroll-inner {

  height: 100%;

  overflow: auto;

}

应该能用，我试了三遍才定位到是 class 没挂对位置，别再在外层瞎折腾了。

这个问题确实坑过不少人，主要是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。