Akryum / Akryum/vue-virtual-scroller

Fast scrolling elements disappear

Offen
#882 4 Kommentare 8 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
10.8k
Forks
973
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### Describe the bug

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

![](https://github.com/user-attachments/assets/004700ae-36cd-4ad5-b993-aaf4f231b93f)

Close browser developer tools. Test

![](https://github.com/user-attachments/assets/f98841ef-9bb1-4de3-9ea5-790998bbb3b3)

### Reproduction

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

Code:

```vue

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);
});







{{ item.id }}




.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;
}

```

### System Info

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

```shell
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

- [X] Read the [docs](https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md).
- [X] Check that there isn't [already an issue](https://github.com/Akryum/vue-virtual-scroller/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/Akryum/vue-virtual-scroller/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.