Open
Description
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.