Fast scrolling elements disappear

Author: 11003Created Dec 10, 2024Updated Aug 12, 2026
Labelsbug

Describe the bug

Drag the right scroll bar to move quickly, and the item elements disappear visually

Close browser developer tools. Test

Reproduction

https://pure-admin.github.io/vue-pure-admin/#/components/virtual-list

Code:

xml
<script setup lang="ts">
import { ref, computed } from "vue";
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

const items = ref([]);
const search = ref("");

for (let i = 0; i < 800; i++) {
  items.value.push({
    id: i
  });
}

const filteredItems = computed(() => {
  if (!search.value) return items.value;
  const lowerCaseSearch = search.value;
  return items.value.filter(i => i.id == lowerCaseSearch);
});
</script>

<template>
  <div class="dynamic-scroller-demo">
    <DynamicScroller
      :items="filteredItems"
      :min-item-size="54"
      class="scroller"
    >
      <template #default="{ item, index, active }">
        <DynamicScrollerItem
          :item="item"
          :active="active"
          :size-dependencies="[item.id]"
          :data-index="index"
          :data-active="active"
          :title="`Click to change message ${index}`"
          class="message"
        >
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48m80 224h-64v64a16 16 0 0 1-32 0v-64h-64a16 16 0 0 1 0-32h64v-64a16 16 0 0 1 32 0v64h64a16 16 0 0 1 0 32"/></svg>
            <span>{{ item.id }}</span>
          </div>
        </DynamicScrollerItem>
      </template>
    </DynamicScroller>
  </div>
</template>

<style scoped>
.dynamic-scroller-demo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scroller {
  flex: auto 1 1;
  border: 1px solid #333;
}

.message {
  box-sizing: border-box;
  display: flex;
  min-height: 32px;
  padding: 12px;
}
</style>

System Info

bash
"vue-virtual-scroller": "2.0.0-beta.8",
bash
System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400F
    Memory: 12.87 GB / 31.82 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.80)
    Internet Explorer: 11.0.22621.3527

Used Package Manager

pnpm

Validations

Source: Akryum/vue-virtual-scroller