能否为vue-virtual-scroller设置覆盖式滚动条并移除预留空间？

我之前碰到过一模一样的需求，不用额外插件，靠自定义CSS+少量JS就能实现，完美避开和vue-virtual-scroller的冲突。

核心思路 #

隐藏原生滚动条但保留滚动功能，同时自定义一个覆盖在内容上方的滚动条，通过JS同步滑块位置，确保不影响虚拟滚动的正常逻辑。

具体实现步骤 #

1. 给vue-virtual-scroller容器加自定义类名，比如custom-virtual-scroller
2. 写入以下CSS：

/* 隐藏各浏览器原生滚动条 */
.custom-virtual-scroller::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.custom-virtual-scroller {
  position: relative;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* 滚动条轨道（可选） */
.custom-virtual-scroller::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: calc(100% - 4px);
  border-radius: 3px;
  background: rgba(0,0,0,0.05);
  opacity: 0;
  transition: opacity 0.2s;
}

/* 鼠标悬停显示轨道和滑块 */
.custom-virtual-scroller:hover::after {
  opacity: 1;
}

/* 自定义滚动滑块 */
.custom-scrollbar-thumb {
  position: absolute;
  right: 2px;
  width: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  z-index: 1;
}
.custom-virtual-scroller:hover .custom-scrollbar-thumb {
  opacity: 1;
}

3. 添加JS同步滑块位置：

const scroller = ref(null)
const scrollThumb = ref(null)

function updateScrollThumb() {
  if (!scroller.value || !scrollThumb.value) return
  const { scrollTop, scrollHeight, clientHeight } = scroller.value
  // 计算滑块高度和位置
  const thumbHeight = Math.max((clientHeight / scrollHeight) * clientHeight, 20) // 限制最小高度
  const thumbTop = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight) || 0
  scrollThumb.value.style.top = `${thumbTop}px`
  scrollThumb.value.style.height = `${thumbHeight}px`
}

onMounted(() => {
  scroller.value.addEventListener('scroll', updateScrollThumb)
  // 监听容器大小变化，适配窗口 resize
  new ResizeObserver(updateScrollThumb).observe(scroller.value)
  updateScrollThumb()
})

onUnmounted(() => {
  scroller.value?.removeEventListener('scroll', updateScrollThumb)
})

4. 调整模板结构：

<vue-virtual-scroller
  ref="scroller"
  class="custom-virtual-scroller"
  :items="yourItemList"
  item-height="60"
>
  <template v-slot="{ item }">
    <!-- 你的列表项内容 -->
  </template>
  <div ref="scrollThumb" class="custom-scrollbar-thumb"></div>
</vue-virtual-scroller>

注意点 #

• 完全基于原生滚动，不会干扰vue-virtual-scroller的虚拟渲染逻辑
• 横向滚动需求可以复制逻辑修改方向（把width/height、left/right对应调整）
• 样式可以根据自己的UI需求修改颜色、宽度、圆角等参数

内容的提问来源于stack exchange，提问作者Dmytro Smirnov