Fast scrolling elements disappear

[11003]

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:

<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

"vue-virtual-scroller": "2.0.0-beta.8",

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

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[niyangup]

这个解决了吗

[11003]

这个解决了吗

No

[ferflores507]

这个解决了吗

应该问题不大。可能跟电脑内存有关系，导致卡了。

I think it is an issue because the missing items are not shown again until the visible items are refreshed. I'm able to reproduce the issue with my current project.

Inspecting the scroller pool after there was a gap (between 574 and 576):

Item with index 575 was missing. The items around it didn't have consecutive indexes so at least we know where is the issue: