Akryum / Akryum/vue-virtual-scroller

DynamicScroller -> .scrollToBottom() causes infinite requestAnimationFrame recursion when enough unknown elements added

Aperta
#221 3 commenti 8 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
10.8k
Fork
973
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

If there are enough elements with unknown size, the `.scrollToBottom()` function can skip a chunk of items, which will cause an infinite loop with `requestAnimationFrame(cb)` (https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/DynamicScroller.vue#L185).

Because of skipped items, line https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/DynamicScroller.vue#L182 will never be true (`this.$_undefinedSizes` gets stuck at n > 0), so it will never break.

Tested on:
(Ubuntu 18.04.2 LTS)
* Chrome - Version 73.0.3683.103 (Official Build) (64-bit)
* Firefox - 67.0 (64-bit)

This can be reproduced with the example project (https://github.com/Akryum/vue-virtual-scroller/blob/master/docs-src/src/components/TestChat.vue); by replacing https://github.com/Akryum/vue-virtual-scroller/blob/master/docs-src/src/components/TestChat.vue#L10 with a bigger number, let's say 150. The items will be added, but you will not be able to scroll the list.

A quick & dirty fix would be to replace the above-mentioned line (https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/DynamicScroller.vue#L182) with
`if (this.$_undefinedSizes === 0 || this.$_undefinedMap[this.items[(this.items.length - 1)].id] === undefined) {`, but this causes issues when scrolling up - skipped elements, can cause the list to jump.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.