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:
<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.3527Used 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.
Source: Akryum/vue-virtual-scroller